fix(ssr): mixed ssr methods styles (#6289)

johnjenkins · John Jenkins · web-flow · commit e253cebf547c · 2025-06-11T15:13:55.000-07:00
Co-authored-by: John Jenkins &lt;john.jenkins@nanoporetech.com&gt;
diff --git a/src/runtime/styles.ts b/src/runtime/styles.ts
@@ -75,8 +75,7 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
           // This is only happening on native shadow-dom, do not needs CSS var shim
           styleElm.innerHTML = style;
         } else {
-          styleElm =
-            document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`) || win.document.createElement('style');
+          styleElm = win.document.createElement('style');
           styleElm.innerHTML = style;
 
           // Apply CSP nonce to the style tag if it exists
diff --git a/test/wdio/ssr-hydration/cmp.test.tsx b/test/wdio/ssr-hydration/cmp.test.tsx
@@ -77,8 +77,8 @@ describe('Sanity check SSR > Client hydration', () => {
         await expect(getNodeNames(ele.shadowRoot.childNodes)).toBe(eles);
 
         // Checking styling
-        await expect(getComputedStyle(ele).color).toBe('rgb(255, 0, 0)');
-        await expect(getComputedStyle(ele).backgroundColor).toBe('rgb(255, 255, 0)');
+        await expect(getComputedStyle(ele).color).toBe('rgb(255, 0, 0)'); // red
+        await expect(getComputedStyle(ele).backgroundColor).toBe('rgb(255, 255, 0)'); // yellow
       },
 
       slots: async () => {
@@ -247,4 +247,48 @@ describe('Sanity check SSR > Client hydration', () => {
     renderTime = performance.measure('render', 'start-scoped', 'end-scoped').duration;
     await expect(renderTime).toBeLessThan(50);
   });
+
+  it("renders the styles of scoped components when they're embedded in a shadow root", async () => {
+    if (document.querySelector('#stage')) {
+      document.querySelector('#stage')?.remove();
+      await browser.waitUntil(async () => !document.querySelector('#stage'));
+    }
+    const { html } = await renderToString(
+      `
+      <div>
+        <wrap-ssr-shadow-cmp>Inside shadowroot</wrap-ssr-shadow-cmp>
+        <ssr-shadow-cmp>Outside shadowroot</ssr-shadow-cmp>
+      </div>`,
+      {
+        fullDocument: true,
+        serializeShadowRoot: {
+          default: 'declarative-shadow-dom',
+          scoped: ['ssr-shadow-cmp'],
+        },
+      },
+    );
+    const stage = document.createElement('div');
+    stage.setAttribute('id', 'stage');
+    stage.setHTMLUnsafe(html);
+    document.body.appendChild(stage);
+
+    // @ts-expect-error resolved through WDIO
+    const { defineCustomElements } = await import('/dist/loader/index.js');
+    defineCustomElements().catch(console.error);
+
+    // wait for Stencil to take over and reconcile
+    await browser.waitUntil(async () => customElements.get('ssr-shadow-cmp'));
+    expect(typeof customElements.get('ssr-shadow-cmp')).toBe('function');
+
+    const wrapCmp = document.querySelector('wrap-ssr-shadow-cmp');
+    const scopedCmp = document.querySelector('ssr-shadow-cmp');
+    const scopedNestCmp = wrapCmp.shadowRoot.querySelector('ssr-shadow-cmp');
+
+    await expect(getComputedStyle(wrapCmp).color).toBe('rgb(255, 255, 255)'); // white
+    await expect(getComputedStyle(wrapCmp).backgroundColor).toBe('rgb(0, 0, 255)'); // blue
+    await expect(getComputedStyle(scopedCmp).color).toBe('rgb(255, 0, 0)'); // red
+    await expect(getComputedStyle(scopedCmp).backgroundColor).toBe('rgb(255, 255, 0)'); // yellow
+    await expect(getComputedStyle(scopedNestCmp).color).toBe('rgb(255, 0, 0)'); // red
+    await expect(getComputedStyle(scopedNestCmp).backgroundColor).toBe('rgb(255, 255, 0)'); // yellow
+  });
 });
diff --git a/test/wdio/ssr-hydration/wrap-cmp.tsx b/test/wdio/ssr-hydration/wrap-cmp.tsx
@@ -0,0 +1,33 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'wrap-ssr-shadow-cmp',
+  shadow: true,
+  styles: `
+    :host {
+      display: block;
+      padding: 10px;
+      border: 2px solid #000;
+      background: blue;
+      color: white;
+    }
+  `,
+})
+export class SsrWrapShadowCmp {
+  @Prop() selected: boolean;
+
+  render() {
+    return (
+      <div
+        class={{
+          selected: this.selected,
+        }}
+      >
+        Nested component:
+        <ssr-shadow-cmp>
+          <slot />
+        </ssr-shadow-cmp>
+      </div>
+    );
+  }
+}
