From e2bc36ffec1551c60f5b8461017a93acd8a4627b Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 11 May 2022 10:55:14 -0700
Subject: [PATCH] fix(engine-dom): refactor stylesheet API for consistency
 (#2827)

* fix(engine-dom): refactor stylesheet API for consistency

* fix: remove useless code comment

* test: remove unnecessary test

* test: remove unnecessary test

* refactor: slight refactor

* fix: add code comments

* fix: add code comments

* fix: add better comment
---
 .../engine-core/src/framework/hydration.ts    |   1 +
 .../@lwc/engine-core/src/framework/main.ts    |   3 +-
 .../engine-core/src/framework/stylesheet.ts   |  24 +--
 packages/@lwc/engine-core/src/framework/vm.ts |   6 +-
 packages/@lwc/engine-core/src/renderer.ts     |   9 +-
 .../engine-dom/src/apis/hydrate-component.ts  |   1 +
 .../@lwc/engine-dom/src/initializeRenderer.ts |   9 +-
 packages/@lwc/engine-dom/src/renderer.ts      |  98 +----------
 packages/@lwc/engine-dom/src/styles.ts        | 152 ++++++++++++++++++
 .../engine-server/src/initializeRenderer.ts   |   9 +-
 packages/@lwc/engine-server/src/renderer.ts   |   4 -
 .../integration-karma/helpers/test-setup.js   |  43 ++++-
 .../test/misc/clean-dom/index.spec.js         |  12 ++
 13 files changed, 221 insertions(+), 150 deletions(-)
 create mode 100644 packages/@lwc/engine-dom/src/styles.ts

diff --git a/packages/@lwc/engine-core/src/framework/hydration.ts b/packages/@lwc/engine-core/src/framework/hydration.ts
index 76b6c64b76..d741e21548 100644
--- a/packages/@lwc/engine-core/src/framework/hydration.ts
+++ b/packages/@lwc/engine-core/src/framework/hydration.ts
@@ -204,6 +204,7 @@ function hydrateCustomElement(elm: Node, vnode: VCustomElement): Node | null {
         mode,
         owner,
         tagName: sel,
+        hydrated: true,
     });
 
     vnode.elm = elm;
diff --git a/packages/@lwc/engine-core/src/framework/main.ts b/packages/@lwc/engine-core/src/framework/main.ts
index 816bbe4d22..a4ff3815f4 100644
--- a/packages/@lwc/engine-core/src/framework/main.ts
+++ b/packages/@lwc/engine-core/src/framework/main.ts
@@ -80,8 +80,6 @@ export {
     setGetProperty,
     setHTMLElement,
     setInsert,
-    setInsertGlobalStylesheet,
-    setInsertStylesheet,
     setIsConnected,
     setIsHydrating,
     setIsNativeShadowDefined,
@@ -98,4 +96,5 @@ export {
     setSetText,
     setSsr,
     setAddEventListener,
+    setInsertStylesheet,
 } from '../renderer';
diff --git a/packages/@lwc/engine-core/src/framework/stylesheet.ts b/packages/@lwc/engine-core/src/framework/stylesheet.ts
index 40cec3f838..270ef25dde 100644
--- a/packages/@lwc/engine-core/src/framework/stylesheet.ts
+++ b/packages/@lwc/engine-core/src/framework/stylesheet.ts
@@ -6,15 +6,7 @@
  */
 import { ArrayJoin, ArrayPush, isArray, isNull, isUndefined, KEY__SCOPED_CSS } from '@lwc/shared';
 
-import {
-    getClassList,
-    removeAttribute,
-    setAttribute,
-    insertGlobalStylesheet,
-    ssr,
-    isHydrating,
-    insertStylesheet,
-} from '../renderer';
+import { getClassList, removeAttribute, setAttribute, ssr, insertStylesheet } from '../renderer';
 
 import api from './api';
 import { RenderMode, ShadowMode, VM } from './vm';
@@ -207,9 +199,9 @@ export function createStylesheet(vm: VM, stylesheets: string[]): VNode | null {
     const { renderMode, shadowMode } = vm;
     if (renderMode === RenderMode.Shadow && shadowMode === ShadowMode.Synthetic) {
         for (let i = 0; i < stylesheets.length; i++) {
-            insertGlobalStylesheet(stylesheets[i]);
+            insertStylesheet(stylesheets[i]);
         }
-    } else if (ssr || isHydrating()) {
+    } else if (ssr || vm.hydrated) {
         // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
         //       This works in the client, because the stylesheets are created, and cached in the VM
         //       the first time the VM renders.
@@ -220,14 +212,10 @@ export function createStylesheet(vm: VM, stylesheets: string[]): VNode | null {
     } else {
         // native shadow or light DOM, DOM renderer
         const root = getNearestNativeShadowComponent(vm);
-        const isGlobal = isNull(root);
+        // null root means a global style
+        const target = isNull(root) ? undefined : root.shadowRoot!;
         for (let i = 0; i < stylesheets.length; i++) {
-            if (isGlobal) {
-                insertGlobalStylesheet(stylesheets[i]);
-            } else {
-                // local level
-                insertStylesheet(stylesheets[i], root!.shadowRoot!);
-            }
+            insertStylesheet(stylesheets[i], target);
         }
     }
     return null;
diff --git a/packages/@lwc/engine-core/src/framework/vm.ts b/packages/@lwc/engine-core/src/framework/vm.ts
index fdb1a2bc1a..c8c29af0b3 100644
--- a/packages/@lwc/engine-core/src/framework/vm.ts
+++ b/packages/@lwc/engine-core/src/framework/vm.ts
@@ -111,6 +111,8 @@ export interface VM<N = HostNode, E = HostElement> {
     readonly context: Context;
     /** The owner VM or null for root elements. */
     readonly owner: VM<N, E> | null;
+    /** Whether or not the VM was hydrated */
+    readonly hydrated: boolean;
     /** Rendering operations associated with the VM */
     readonly renderMode: RenderMode;
     shadowMode: ShadowMode;
@@ -263,9 +265,10 @@ export function createVM<HostNode, HostElement>(
         mode: ShadowRootMode;
         owner: VM<HostNode, HostElement> | null;
         tagName: string;
+        hydrated?: boolean;
     }
 ): VM {
-    const { mode, owner, tagName } = options;
+    const { mode, owner, tagName, hydrated } = options;
     const def = getComponentInternalDef(ctor);
 
     const vm: VM = {
@@ -286,6 +289,7 @@ export function createVM<HostNode, HostElement>(
         cmpSlots: create(null),
         oar: create(null),
         cmpTemplate: null,
+        hydrated: Boolean(hydrated),
 
         renderMode: def.renderMode,
         shadowMode: computeShadowMode(def, owner),
diff --git a/packages/@lwc/engine-core/src/renderer.ts b/packages/@lwc/engine-core/src/renderer.ts
index 4d8cf91ca5..002d4df0c3 100644
--- a/packages/@lwc/engine-core/src/renderer.ts
+++ b/packages/@lwc/engine-core/src/renderer.ts
@@ -245,14 +245,7 @@ export let isConnected: isConnectedFunc;
 export function setIsConnected(isConnectedImpl: isConnectedFunc) {
     isConnected = isConnectedImpl;
 }
-
-type insertGlobalStylesheetFunc = (content: string) => void;
-export let insertGlobalStylesheet: insertGlobalStylesheetFunc;
-export function setInsertGlobalStylesheet(insertGlobalStylesheetImpl: insertGlobalStylesheetFunc) {
-    insertGlobalStylesheet = insertGlobalStylesheetImpl;
-}
-
-type insertStylesheetFunc = (content: string, target: ShadowRoot) => void;
+type insertStylesheetFunc = (content: string, target?: ShadowRoot) => void;
 export let insertStylesheet: insertStylesheetFunc;
 export function setInsertStylesheet(insertStylesheetImpl: insertStylesheetFunc) {
     insertStylesheet = insertStylesheetImpl;
diff --git a/packages/@lwc/engine-dom/src/apis/hydrate-component.ts b/packages/@lwc/engine-dom/src/apis/hydrate-component.ts
index 8aca99f4d0..335ebc0aba 100644
--- a/packages/@lwc/engine-dom/src/apis/hydrate-component.ts
+++ b/packages/@lwc/engine-dom/src/apis/hydrate-component.ts
@@ -36,6 +36,7 @@ function createVMWithProps(element: Element, Ctor: typeof LightningElement, prop
         mode: 'open',
         owner: null,
         tagName: element.tagName.toLowerCase(),
+        hydrated: true,
     });
 
     for (const [key, value] of Object.entries(props)) {
diff --git a/packages/@lwc/engine-dom/src/initializeRenderer.ts b/packages/@lwc/engine-dom/src/initializeRenderer.ts
index 24b92b3a3e..0629aad941 100644
--- a/packages/@lwc/engine-dom/src/initializeRenderer.ts
+++ b/packages/@lwc/engine-dom/src/initializeRenderer.ts
@@ -28,8 +28,6 @@ import {
     setGetProperty,
     setHTMLElement,
     setInsert,
-    setInsertGlobalStylesheet,
-    setInsertStylesheet,
     setIsConnected,
     setIsHydrating,
     setIsNativeShadowDefined,
@@ -46,6 +44,7 @@ import {
     setSetText,
     setSsr,
     setAddEventListener,
+    setInsertStylesheet,
 } from '@lwc/engine-core';
 
 import {
@@ -71,8 +70,6 @@ import {
     getProperty,
     HTMLElement,
     insert,
-    insertGlobalStylesheet,
-    insertStylesheet,
     isConnected,
     isHydrating,
     isNativeShadowDefined,
@@ -89,6 +86,7 @@ import {
     setText,
     ssr,
     addEventListener,
+    insertStylesheet,
 } from './renderer';
 
 setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElement);
@@ -113,8 +111,6 @@ setGetLastElementChild(getLastElementChild);
 setGetProperty(getProperty);
 setHTMLElement(HTMLElement);
 setInsert(insert);
-setInsertGlobalStylesheet(insertGlobalStylesheet);
-setInsertStylesheet(insertStylesheet);
 setIsConnected(isConnected);
 setIsHydrating(isHydrating);
 setIsNativeShadowDefined(isNativeShadowDefined);
@@ -131,3 +127,4 @@ setSetProperty(setProperty);
 setSetText(setText);
 setSsr(ssr);
 setAddEventListener(addEventListener);
+setInsertStylesheet(insertStylesheet);
diff --git a/packages/@lwc/engine-dom/src/renderer.ts b/packages/@lwc/engine-dom/src/renderer.ts
index 7aae935623..d2b947692a 100644
--- a/packages/@lwc/engine-dom/src/renderer.ts
+++ b/packages/@lwc/engine-dom/src/renderer.ts
@@ -11,39 +11,13 @@ import {
     hasOwnProperty,
     htmlPropertyToAttribute,
     globalThis,
-    isFunction,
     isUndefined,
-    isArray,
     KEY__IS_NATIVE_SHADOW_ROOT_DEFINED,
     KEY__SHADOW_TOKEN,
     setPrototypeOf,
     StringToLowerCase,
-    getOwnPropertyDescriptor,
 } from '@lwc/shared';
-
-const globalStylesheets: { [content: string]: true } = create(null);
-
-if (process.env.NODE_ENV === 'development') {
-    // @ts-ignore
-    window.__lwcResetGlobalStylesheets = () => {
-        for (const key of Object.keys(globalStylesheets)) {
-            delete globalStylesheets[key];
-        }
-    };
-}
-
-const globalStylesheetsParentElement: Element = document.head || document.body || document;
-// This check for constructable stylesheets is similar to Fast's:
-// https://github.com/microsoft/fast/blob/d49d1ec/packages/web-components/fast-element/src/dom.ts#L51-L53
-// See also: https://github.com/whatwg/webidl/issues/1027#issuecomment-934510070
-const supportsConstructableStyleSheets =
-    isFunction(CSSStyleSheet.prototype.replaceSync) && isArray(document.adoptedStyleSheets);
-const supportsMutableAdoptedStyleSheets =
-    supportsConstructableStyleSheets &&
-    getOwnPropertyDescriptor(document.adoptedStyleSheets, 'length')!.writable;
-const styleElements: { [content: string]: HTMLStyleElement } = create(null);
-const styleSheets: { [content: string]: CSSStyleSheet } = create(null);
-const shadowRootsToStyleSheets = new WeakMap<ShadowRoot, { [content: string]: true }>();
+export { insertStylesheet } from './styles';
 
 export let getCustomElement: any;
 export let defineCustomElement: any;
@@ -72,53 +46,6 @@ function isCustomElementRegistryAvailable() {
     }
 }
 
-function insertConstructableStyleSheet(content: string, target: ShadowRoot) {
-    // It's important for CSSStyleSheets to be unique based on their content, so that
-    // `shadowRoot.adoptedStyleSheets.includes(sheet)` works.
-    let styleSheet = styleSheets[content];
-    if (isUndefined(styleSheet)) {
-        styleSheet = new CSSStyleSheet();
-        styleSheet.replaceSync(content);
-        styleSheets[content] = styleSheet;
-    }
-    const { adoptedStyleSheets } = target;
-    if (!adoptedStyleSheets.includes(styleSheet)) {
-        if (supportsMutableAdoptedStyleSheets) {
-            // This is only supported in later versions of Chromium:
-            // https://chromestatus.com/feature/5638996492288000
-            adoptedStyleSheets.push(styleSheet);
-        } else {
-            target.adoptedStyleSheets = [...adoptedStyleSheets, styleSheet];
-        }
-    }
-}
-
-function insertStyleElement(content: string, target: ShadowRoot) {
-    // Avoid inserting duplicate `<style>`s
-    let sheets = shadowRootsToStyleSheets.get(target);
-    if (isUndefined(sheets)) {
-        sheets = create(null);
-        shadowRootsToStyleSheets.set(target, sheets!);
-    }
-    if (sheets![content]) {
-        return;
-    }
-    sheets![content] = true;
-
-    // This `<style>` may be repeated multiple times in the DOM, so cache it. It's a bit
-    // faster to call `cloneNode()` on an existing node than to recreate it every time.
-    let elm = styleElements[content];
-    if (isUndefined(elm)) {
-        elm = document.createElement('style');
-        elm.type = 'text/css';
-        elm.textContent = content;
-        styleElements[content] = elm;
-    } else {
-        elm = elm.cloneNode(true) as HTMLStyleElement;
-    }
-    target.appendChild(elm);
-}
-
 if (isCustomElementRegistryAvailable()) {
     getCustomElement = customElements.get.bind(customElements);
     defineCustomElement = customElements.define.bind(customElements);
@@ -349,29 +276,6 @@ export function isConnected(node: Node): boolean {
     return node.isConnected;
 }
 
-export function insertGlobalStylesheet(content: string): void {
-    if (!isUndefined(globalStylesheets[content])) {
-        return;
-    }
-
-    globalStylesheets[content] = true;
-
-    const elm = document.createElement('style');
-    elm.type = 'text/css';
-    elm.textContent = content;
-
-    globalStylesheetsParentElement.appendChild(elm);
-}
-
-export function insertStylesheet(content: string, target: ShadowRoot): void {
-    if (supportsConstructableStyleSheets) {
-        insertConstructableStyleSheet(content, target);
-    } else {
-        // Fall back to <style> element
-        insertStyleElement(content, target);
-    }
-}
-
 export function assertInstanceOfHTMLElement(elm: any, msg: string) {
     assert.invariant(elm instanceof HTMLElement, msg);
 }
diff --git a/packages/@lwc/engine-dom/src/styles.ts b/packages/@lwc/engine-dom/src/styles.ts
new file mode 100644
index 0000000000..991e91c76e
--- /dev/null
+++ b/packages/@lwc/engine-dom/src/styles.ts
@@ -0,0 +1,152 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { isUndefined, getOwnPropertyDescriptor, isArray, isFunction } from '@lwc/shared';
+
+//
+// Feature detection
+//
+
+// This check for constructable style sheets is similar to Fast's:
+// https://github.com/microsoft/fast/blob/d49d1ec/packages/web-components/fast-element/src/dom.ts#L51-L53
+// See also: https://github.com/whatwg/webidl/issues/1027#issuecomment-934510070
+const supportsConstructableStylesheets =
+    isFunction(CSSStyleSheet.prototype.replaceSync) && isArray(document.adoptedStyleSheets);
+// The original adoptedStylesheet proposal used a frozen array. A follow-up proposal made the array mutable.
+// Chromium 99+ and Firefox 101+ support mutable arrays. We check if the array is mutable, to ensure backward compat.
+// (If the length is writable, then the array is mutable.) See: https://chromestatus.com/feature/5638996492288000
+// TODO [#2828]: Re-evaluate this in the future once we drop support for older browser versions.
+const supportsMutableAdoptedStyleSheets =
+    supportsConstructableStylesheets &&
+    getOwnPropertyDescriptor(document.adoptedStyleSheets, 'length')!.writable;
+// Detect IE, via https://stackoverflow.com/a/9851769
+const isIE11 = !isUndefined((document as any).documentMode);
+
+//
+// Style sheet cache
+//
+
+// Global cache of style elements used for fast cloning
+let styleElements: Map<string, HTMLStyleElement> = new Map();
+// Global cache of CSSStyleSheets because these need to be unique based on content so the browser
+// can optimize repeated usages across multiple shadow roots
+let stylesheets: Map<string, CSSStyleSheet> = new Map();
+// Bookkeeping of targets to CSS that has already been injected into them, so we don't duplicate
+let shadowRootsToInsertedStylesheets: WeakMap<ShadowRoot, Set<string>> = new WeakMap();
+// Same as above, but for the global document to avoid an extra WeakMap lookup for this common case
+let globalInsertedStylesheets: Set<string> = new Set();
+
+//
+// Test utilities
+//
+
+if (process.env.NODE_ENV === 'development') {
+    // @ts-ignore
+    window.__lwcResetGlobalStylesheets = () => {
+        styleElements = new Map();
+        stylesheets = new Map();
+        shadowRootsToInsertedStylesheets = new WeakMap();
+        globalInsertedStylesheets = new Set();
+    };
+}
+
+function isDocument(target: ShadowRoot | Document): target is Document {
+    return !isUndefined((target as Document).head);
+}
+
+function createFreshStyleElement(content: string) {
+    const elm = document.createElement('style');
+    elm.type = 'text/css';
+    elm.textContent = content;
+    return elm;
+}
+
+function createStyleElement(content: string) {
+    // For a mysterious reason, IE11 doesn't like the way we clone <style> nodes
+    // and will render the incorrect styles if we do things that way. It's just
+    // a perf optimization, so we can skip it for IE11.
+    if (isIE11) {
+        return createFreshStyleElement(content);
+    }
+
+    let elm = styleElements.get(content);
+    if (isUndefined(elm)) {
+        // We don't clone every time, because that would be a perf tax on the first time
+        elm = createFreshStyleElement(content);
+        styleElements.set(content, elm);
+    } else {
+        // This `<style>` may be repeated multiple times in the DOM, so cache it. It's a bit
+        // faster to call `cloneNode()` on an existing node than to recreate it every time.
+        elm = elm.cloneNode(true) as HTMLStyleElement;
+    }
+    return elm;
+}
+
+function createOrGetConstructableStylesheet(content: string) {
+    // It's important for CSSStyleSheets to be unique based on their content, so
+    // that adoptedStyleSheets.indexOf(sheet) works
+    let stylesheet = stylesheets.get(content);
+    if (isUndefined(stylesheet)) {
+        stylesheet = new CSSStyleSheet();
+        stylesheet.replaceSync(content);
+        stylesheets.set(content, stylesheet);
+    }
+    return stylesheet;
+}
+
+function insertConstructableStylesheet(content: string, target: ShadowRoot | Document) {
+    const stylesheet = createOrGetConstructableStylesheet(content);
+    const { adoptedStyleSheets } = target;
+    // Mutable adopted stylesheets are only supported in certain browsers.
+    // The reason we use it is for perf: https://github.com/salesforce/lwc/pull/2683
+    if (supportsMutableAdoptedStyleSheets) {
+        adoptedStyleSheets.push(stylesheet);
+    } else {
+        target.adoptedStyleSheets = [...adoptedStyleSheets, stylesheet];
+    }
+}
+
+function insertStyleElement(content: string, target: ShadowRoot | Document) {
+    const elm = createStyleElement(content);
+    const targetAnchorPoint = isDocument(target) ? target.head : target;
+    targetAnchorPoint.appendChild(elm);
+}
+
+function doInsertStylesheet(content: string, target: ShadowRoot | Document) {
+    // Constructable stylesheets are only supported in certain browsers:
+    // https://caniuse.com/mdn-api_document_adoptedstylesheets
+    // The reason we use it is for perf: https://github.com/salesforce/lwc/pull/2460
+    if (supportsConstructableStylesheets) {
+        insertConstructableStylesheet(content, target);
+    } else {
+        // Fall back to <style> element
+        insertStyleElement(content, target);
+    }
+}
+
+function getInsertedStylesheetsForShadowRoot(target: ShadowRoot) {
+    let insertedStylesheets = shadowRootsToInsertedStylesheets.get(target);
+    if (isUndefined(insertedStylesheets)) {
+        insertedStylesheets = new Set();
+        shadowRootsToInsertedStylesheets.set(target, insertedStylesheets);
+    }
+    return insertedStylesheets;
+}
+
+export function insertStylesheet(content: string, target?: ShadowRoot) {
+    const isGlobal = isUndefined(target);
+    const insertedStylesheets = isGlobal
+        ? globalInsertedStylesheets
+        : getInsertedStylesheetsForShadowRoot(target);
+    if (insertedStylesheets.has(content)) {
+        // already inserted
+        return;
+    }
+    insertedStylesheets.add(content);
+    const documentOrShadowRoot = isGlobal ? document : target;
+    doInsertStylesheet(content, documentOrShadowRoot);
+}
diff --git a/packages/@lwc/engine-server/src/initializeRenderer.ts b/packages/@lwc/engine-server/src/initializeRenderer.ts
index 24b92b3a3e..0629aad941 100644
--- a/packages/@lwc/engine-server/src/initializeRenderer.ts
+++ b/packages/@lwc/engine-server/src/initializeRenderer.ts
@@ -28,8 +28,6 @@ import {
     setGetProperty,
     setHTMLElement,
     setInsert,
-    setInsertGlobalStylesheet,
-    setInsertStylesheet,
     setIsConnected,
     setIsHydrating,
     setIsNativeShadowDefined,
@@ -46,6 +44,7 @@ import {
     setSetText,
     setSsr,
     setAddEventListener,
+    setInsertStylesheet,
 } from '@lwc/engine-core';
 
 import {
@@ -71,8 +70,6 @@ import {
     getProperty,
     HTMLElement,
     insert,
-    insertGlobalStylesheet,
-    insertStylesheet,
     isConnected,
     isHydrating,
     isNativeShadowDefined,
@@ -89,6 +86,7 @@ import {
     setText,
     ssr,
     addEventListener,
+    insertStylesheet,
 } from './renderer';
 
 setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElement);
@@ -113,8 +111,6 @@ setGetLastElementChild(getLastElementChild);
 setGetProperty(getProperty);
 setHTMLElement(HTMLElement);
 setInsert(insert);
-setInsertGlobalStylesheet(insertGlobalStylesheet);
-setInsertStylesheet(insertStylesheet);
 setIsConnected(isConnected);
 setIsHydrating(isHydrating);
 setIsNativeShadowDefined(isNativeShadowDefined);
@@ -131,3 +127,4 @@ setSetProperty(setProperty);
 setSetText(setText);
 setSsr(ssr);
 setAddEventListener(addEventListener);
+setInsertStylesheet(insertStylesheet);
diff --git a/packages/@lwc/engine-server/src/renderer.ts b/packages/@lwc/engine-server/src/renderer.ts
index 02324a8615..28c5401e3e 100644
--- a/packages/@lwc/engine-server/src/renderer.ts
+++ b/packages/@lwc/engine-server/src/renderer.ts
@@ -323,10 +323,6 @@ export function isConnected(node: HostNode) {
     return !isNull(node.parent);
 }
 
-// Noop on SSR (for now). This need to be reevaluated whenever we will implement support for
-// synthetic shadow.
-export const insertGlobalStylesheet = noop as (content: string) => void;
-
 // Noop on SSR (for now). This need to be reevaluated whenever we will implement support for
 // synthetic shadow.
 export const insertStylesheet = noop as (content: string, target: any) => void;
diff --git a/packages/integration-karma/helpers/test-setup.js b/packages/integration-karma/helpers/test-setup.js
index 9fbbc34cd7..5fe0a5904b 100644
--- a/packages/integration-karma/helpers/test-setup.js
+++ b/packages/integration-karma/helpers/test-setup.js
@@ -8,18 +8,30 @@
 // Global beforeEach/afterEach/etc logic to run before and after each test
 
 var knownChildren;
+var knownAdoptedStyleSheets;
+
+function getHeadChildren() {
+    return Array.prototype.slice.apply(document.head.children);
+}
+
+function getBodyChildren() {
+    return Array.prototype.slice.apply(document.body.children);
+}
+
+function getAdoptedStyleSheets() {
+    return Array.prototype.slice.call(document.adoptedStyleSheets || []);
+}
 
 // After each test, clean up any DOM elements that were inserted into the document
-// <head> or <body>, plus any global <style>s the engine might think are there.
+// <head> or <body>, plus any global <style>s or adopted style sheets.
 
 function getChildren() {
-    return []
-        .concat(Array.prototype.slice.apply(document.head.children))
-        .concat(Array.prototype.slice.apply(document.body.children));
+    return [].concat(getHeadChildren()).concat(getBodyChildren());
 }
 
 beforeEach(function () {
     knownChildren = getChildren();
+    knownAdoptedStyleSheets = getAdoptedStyleSheets();
 });
 
 afterEach(function () {
@@ -28,7 +40,11 @@ afterEach(function () {
             child.parentElement.removeChild(child);
         }
     });
+    if (document.adoptedStyleSheets) {
+        document.adoptedStyleSheets = knownAdoptedStyleSheets;
+    }
     knownChildren = undefined;
+    knownAdoptedStyleSheets = undefined;
     // Need to clear this or else the engine will think there's a <style> in the <head>
     // that already has the style, even though we just removed it
     window.__lwcResetGlobalStylesheets();
@@ -38,15 +54,18 @@ afterEach(function () {
 // no test dirtied the DOM with leftover elements
 var originalHeadChildren;
 var originalBodyChildren;
+var originalAdoptedStyleSheets;
 beforeAll(function () {
-    originalHeadChildren = Array.prototype.slice.call(document.head.children);
-    originalBodyChildren = Array.prototype.slice.call(document.body.children);
+    originalHeadChildren = getHeadChildren();
+    originalBodyChildren = getBodyChildren();
+    originalAdoptedStyleSheets = getAdoptedStyleSheets();
 });
 
 // Throwing an Error in afterAll will cause a non-zero exit code
 afterAll(function () {
-    var headChildren = Array.prototype.slice.call(document.head.children);
-    var bodyChildren = Array.prototype.slice.call(document.body.children);
+    var headChildren = getHeadChildren();
+    var bodyChildren = getBodyChildren();
+    var adoptedStyleSheets = getAdoptedStyleSheets();
 
     headChildren.forEach(function (child, i) {
         if (originalHeadChildren[i] !== child) {
@@ -59,4 +78,12 @@ afterAll(function () {
             throw new Error('Unexpected element left in the <body> by a test: ' + child.outerHTML);
         }
     });
+
+    adoptedStyleSheets.forEach(function (sheet, i) {
+        if (originalAdoptedStyleSheets[i] !== sheet) {
+            throw new Error(
+                'Unexpected adopted style sheet left in the document by a test: ' + sheet
+            );
+        }
+    });
 });
diff --git a/packages/integration-karma/test/misc/clean-dom/index.spec.js b/packages/integration-karma/test/misc/clean-dom/index.spec.js
index efe82a4f30..ffbcda4ba2 100644
--- a/packages/integration-karma/test/misc/clean-dom/index.spec.js
+++ b/packages/integration-karma/test/misc/clean-dom/index.spec.js
@@ -16,9 +16,21 @@ describe('clean DOM', () => {
             document.head.appendChild(style);
             expect(document.querySelector(`.head-${i}`)).toEqual(style);
 
+            // insert adoptedStyleSheets too
+            if (document.adoptedStyleSheets) {
+                const styleSheet = new CSSStyleSheet();
+                styleSheet[`__lwc_${i}__`] = true;
+                document.adoptedStyleSheets = [...document.adoptedStyleSheets];
+            }
+
             // check that we don't have dirty DOM nodes from the other test
             expect(document.querySelector(`.body-${1 - i}`)).toBeNull();
             expect(document.querySelector(`.head-${1 - i}`)).toBeNull();
+            if (document.adoptedStyleSheets) {
+                expect(
+                    [...document.adoptedStyleSheets].find((_) => _[`__lwc_${1 - i}__`])
+                ).toBeUndefined();
+            }
         });
     }
 });