fix: contructable stylesheets with older immutable spec (chrome <99) (#6332)

Resolves #6326

Co-authored-by: Christian Bromann <[email protected]>

Author: aeharding

src/client/client-window.ts

@@ -60,4 +60,10 @@ export const supportsConstructableStylesheets = BUILD.constructableCSS
     })()
   : false;
 
+// https://github.com/salesforce/lwc/blob/5af18fdd904bc6cfcf7b76f3c539490ff11515b2/packages/%40lwc/engine-dom/src/renderer.ts#L41-L43
+export const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets
+  ? /*@__PURE__*/ (() =>
+      !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, 'length')!.writable)()
+  : false;
+
 export { H as HTMLElement };

src/hydrate/platform/index.ts

@@ -124,6 +124,7 @@ export const supportsShadow = BUILD.shadowDom;
 export const supportsListenerOptions = false;
 
 export const supportsConstructableStylesheets = false;
+export const supportsMutableAdoptedStyleSheets = false;
 
 export const getHostRef = (ref: d.RuntimeRef) => {
   if (ref.__stencil__getHostRef) {

src/runtime/styles.ts

@@ -1,5 +1,12 @@
 import { BUILD } from '@app-data';
-import { plt, styles, supportsConstructableStylesheets, supportsShadow, win } from '@platform';
+import {
+  plt,
+  styles,
+  supportsConstructableStylesheets,
+  supportsMutableAdoptedStyleSheets,
+  supportsShadow,
+  win,
+} from '@platform';
 import { CMP_FLAGS, queryNonceMetaTagContent } from '@utils';
 
 import type * as d from '../declarations';
@@ -125,7 +132,11 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
                  * > If the array needs to be modified, use in-place mutations like push().
                  * https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
                  */
-                styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
+                if (supportsMutableAdoptedStyleSheets) {
+                  styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
+                } else {
+                  styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+                }
               } else {
                 /**
                  * If a scoped component is used within a shadow root and constructable stylesheets are
@@ -171,7 +182,11 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
        * > If the array needs to be modified, use in-place mutations like push().
        * https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
        */
-      styleContainerNode.adoptedStyleSheets.push(style);
+      if (supportsMutableAdoptedStyleSheets) {
+        styleContainerNode.adoptedStyleSheets.push(style);
+      } else {
+        styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+      }
     }
   }
   return scopeId;

src/testing/platform/index.ts

@@ -14,6 +14,7 @@ export {
   stopAutoApplyChanges,
   supportsConstructableStylesheets,
   supportsListenerOptions,
+  supportsMutableAdoptedStyleSheets,
   supportsShadow,
 } from './testing-platform';
 export { flushAll, flushLoadModule, flushQueue, loadModule, nextTick, readTask, writeTask } from './testing-task-queue';

src/testing/platform/testing-platform.ts

@@ -28,6 +28,7 @@ export const setPlatformHelpers = (helpers: {
 
 export const supportsListenerOptions = true;
 export const supportsConstructableStylesheets = false;
+export const supportsMutableAdoptedStyleSheets = false;
 
 /**
  * Helper function to programmatically set shadow DOM support in testing scenarios.

src/utils/shadow-root.ts

@@ -1,5 +1,6 @@
 import { BUILD } from '@app-data';
 import { globalStyles } from '@app-globals';
+import { supportsMutableAdoptedStyleSheets } from '@platform';
 import { CMP_FLAGS } from '@utils';
 
 import type * as d from '../declarations';
@@ -19,5 +20,11 @@ export function createShadowRoot(this: HTMLElement, cmpMeta: d.ComponentRuntimeM
   if (globalStyleSheet === undefined) globalStyleSheet = createStyleSheetIfNeededAndSupported(globalStyles) ?? null;
 
   // Use initialized global stylesheet if available
-  if (globalStyleSheet) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+  if (globalStyleSheet) {
+    if (supportsMutableAdoptedStyleSheets) {
+      shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+    } else {
+      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+    }
+  }
 }