fix(styles): support rendering across documents (#6481)

* fix(styles): support rendering across documents

Constructed stylesheets cannot be shared across documents (e.g. within
an iframe). Check in which document the component is and use its own
CSSStyleSheet.

fixes: #6479

* test(cross-document-constructed-styles): added missing test

Create an iframe with no stencil runtime, add a component and expect it
to be rendered ok

Author: emandirola

src/runtime/styles.ts

@@ -127,8 +127,12 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
                *
                * Note: order of how styles are adopted is important. The new stylesheet should be
                * adopted before the existing styles.
+               *
+               * Note: constructable stylesheets can't be shared between windows,
+               * we need to create a new one for the current window if necessary
                */
-              const stylesheet = new CSSStyleSheet();
+              const currentWindow = styleContainerNode.defaultView ?? styleContainerNode.ownerDocument.defaultView;
+              const stylesheet = new currentWindow.CSSStyleSheet();
               stylesheet.replaceSync(style);
 
               /**
@@ -179,15 +183,37 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
           appliedStyles.add(scopeId);
         }
       }
-    } else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
-      /**
-       * > If the array needs to be modified, use in-place mutations like push().
-       * https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
-       */
-      if (supportsMutableAdoptedStyleSheets) {
-        styleContainerNode.adoptedStyleSheets.push(style);
-      } else {
-        styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+    } else if (BUILD.constructableCSS) {
+      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+      if (!appliedStyles) {
+        rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+      }
+      if (!appliedStyles.has(scopeId)) {
+        /**
+         * Constructable stylesheets can't be shared between windows,
+         * we need to create a new one for the current window if necessary
+         */
+        const currentWindow = styleContainerNode.defaultView ?? styleContainerNode.ownerDocument.defaultView;
+        let stylesheet: CSSStyleSheet;
+        if (style.constructor === currentWindow.CSSStyleSheet) {
+          stylesheet = style;
+        } else {
+          stylesheet = new currentWindow.CSSStyleSheet();
+          for (let i = 0; i < style.cssRules.length; i++) {
+            stylesheet.insertRule(style.cssRules[i].cssText, i);
+          }
+        }
+        /**
+         * > If the array needs to be modified, use in-place mutations like push().
+         * https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
+         */
+        if (supportsMutableAdoptedStyleSheets) {
+          styleContainerNode.adoptedStyleSheets.push(stylesheet);
+        } else {
+          styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, stylesheet];
+        }
+
+        appliedStyles.add(scopeId);
       }
     }
   }

test/wdio/cross-document-constructed-styles/cmp.test.tsx

@@ -0,0 +1,15 @@
+import { h, render } from '@stencil/core';
+import { $, browser, expect } from '@wdio/globals';
+
+describe('cross-document-style', () => {
+  before(async () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    render(<cross-document-style></cross-document-style>, iframe.contentDocument.body);
+  });
+
+  it('should render in across frames', async () => {
+    await browser.switchFrame($('iframe'));
+    await expect($('cross-document-style')).toHaveStyle({ color: 'rgb(255,0,0)' });
+  });
+});

test/wdio/cross-document-constructed-styles/cmp.tsx

@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cross-document-style',
+  styles: `
+    :host {
+      color: rgb(255, 0, 0);
+    }
+  `,
+  shadow: true,
+})
+export class CrossDocumentStyleTestCmp {
+  render() {
+    return (
+      <section>
+        <div>I am rendered in red!</div>
+      </section>
+    );
+  }
+}