fix(ssr): scoped: true components forwarded slots (#6340)

* fix(ssr): `scoped: true` slot forwarding

* chore: fix tests

---------

Co-authored-by: John Jenkins <[email protected]>

Author: johnjenkins

src/runtime/client-hydrate.ts

@@ -130,7 +130,11 @@ export const initializeClientHydrate = (
         // If we don't, `vdom-render.ts` will try to add nodes to it (and because it may be a comment node, it will error)
         node['s-cr'] = hostElm['s-cr'];
       }
-    } else if (childRenderNode.$tag$?.toString().includes('-') && !childRenderNode.$elm$.shadowRoot) {
+    } else if (
+      childRenderNode.$tag$?.toString().includes('-') &&
+      childRenderNode.$tag$ !== 'slot-fb' &&
+      !childRenderNode.$elm$.shadowRoot
+    ) {
       // if this child is a non-shadow component being added to a shadowDOM,
       // let's find and add its styles to the shadowRoot, so we don't get a visual flicker
       const cmpMeta = getHostRef(childRenderNode.$elm$);
@@ -215,6 +219,11 @@ export const initializeClientHydrate = (
 
       const hostEle = hosts[slottedItem.hostId as any];
 
+      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
+        // shadowDOM - move the item to the element root for native slotting
+        hostEle.appendChild(slottedItem.node);
+      }
+
       // This node is either slotted in a non-shadow host, OR *that* host is nested in a non-shadow host
       if (!hostEle.shadowRoot || !shadowRoot) {
         // Try to set an appropriate Content-position Reference (CR) node for this host element
@@ -235,16 +244,22 @@ export const initializeClientHydrate = (
         // Create our 'Original Location' node
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node['s-oo']);
 
+        if (
+          slottedItem.node.parentElement?.shadowRoot &&
+          slottedItem.node['getAttribute'] &&
+          slottedItem.node.getAttribute('slot')
+        ) {
+          // Remove the `slot` attribute from the slotted node:
+          // if it's projected from a scoped component into a shadowRoot it's slot attribute will cause it to be hidden.
+          // scoped components use the `s-sn` attribute to identify slotted nodes
+          slottedItem.node.removeAttribute('slot');
+        }
+
         if (BUILD.experimentalSlotFixes) {
           // patch this node for accessors like `nextSibling` (et al)
           patchSlottedNode(slottedItem.node);
         }
       }
-
-      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        // shadowDOM - move the item to the element root for native slotting
-        hostEle.appendChild(slottedItem.node);
-      }
     }
   }
 
@@ -693,22 +708,28 @@ const addSlottedNodes = (
   let slottedNode = slotNode.nextSibling as d.RenderNode;
   slottedNodes[slotNodeId as any] = slottedNodes[slotNodeId as any] || [];
 
-  // Looking for nodes that match this slot's name,
-  // OR are text / comment nodes and the slot is a default slot (no name) - text / comments cannot be direct descendants of *named* slots.
-  // Also ignore slot fallback nodes - they're not part of the lightDOM
-  while (
-    slottedNode &&
-    (((slottedNode['getAttribute'] && slottedNode.getAttribute('slot')) || slottedNode['s-sn']) === slotName ||
-      (slotName === '' &&
-        !slottedNode['s-sn'] &&
-        (slottedNode.nodeType === NODE_TYPE.CommentNode ||
-          slottedNode.nodeType === NODE_TYPE.TextNode ||
-          slottedNode.tagName === 'SLOT')))
-  ) {
-    slottedNode['s-sn'] = slotName;
-    slottedNodes[slotNodeId as any].push({ slot: slotNode, node: slottedNode, hostId });
-    slottedNode = slottedNode.nextSibling as d.RenderNode;
-  }
+  // stop if we find another slot node (as subsequent nodes will belong to that slot)
+  if (!slottedNode || slottedNode.nodeValue?.startsWith(SLOT_NODE_ID + '.')) return;
+
+  // Loop through the next siblings of the slot node, looking for nodes that match this slot's name
+  do {
+    if (
+      slottedNode &&
+      (((slottedNode['getAttribute'] && slottedNode.getAttribute('slot')) || slottedNode['s-sn']) === slotName ||
+        (slotName === '' &&
+          !slottedNode['s-sn'] &&
+          (!slottedNode['getAttribute'] || !slottedNode.getAttribute('slot')) &&
+          (slottedNode.nodeType === NODE_TYPE.CommentNode || slottedNode.nodeType === NODE_TYPE.TextNode)))
+    ) {
+      // Looking for nodes that match this slot's name,
+      // OR are text / comment nodes and the slot is a default slot (no name) - text / comments cannot be direct descendants of *named* slots.
+      // Also ignore slot fallback nodes - they're not part of the lightDOM
+      slottedNode['s-sn'] = slotName;
+      slottedNodes[slotNodeId as any].push({ slot: slotNode, node: slottedNode, hostId });
+    }
+    slottedNode = slottedNode?.nextSibling as d.RenderNode;
+    // continue *unless* we find another slot node (as subsequent nodes will belong to that slot)
+  } while (slottedNode && !slottedNode.nodeValue?.startsWith(SLOT_NODE_ID + '.'));
 };
 
 /**

src/runtime/test/hydrate-shadow-in-shadow.spec.tsx

@@ -60,16 +60,15 @@ describe('hydrate, shadow in shadow', () => {
             <mock:shadow-root>
               <slot></slot>
             </mock:shadow-root>
+            <slot></slot>
           </cmp-b>
         </mock:shadow-root>
         light-dom
-        <slot></slot>
       </cmp-a>
     `);
     expect(clientHydrated.root).toEqualLightHtml(`
       <cmp-a class="hydrated">
         light-dom
-        <slot></slot>
       </cmp-a>
     `);
   });

test/wdio/ssr-hydration/cmp.test.tsx

@@ -424,7 +424,7 @@ describe('Sanity check SSR > Client hydration', () => {
     expect(nestedCmp.childNodes[1].textContent).toBe('after');
   });
 
-  it('renders slot nodes appropriately in a `scoped: true` child with `serializeShadowRoot: "scoped"` parent', async () => {
+  it('adds nested scoped styles to parent shadow root', async () => {
     if (document.querySelector('#stage')) {
       document.querySelector('#stage')?.remove();
       await browser.waitUntil(async () => !document.querySelector('#stage'));
@@ -457,15 +457,11 @@ describe('Sanity check SSR > Client hydration', () => {
     expect(typeof customElements.get('shadow-ssr-parent-cmp')).toBe('function');
 
     const wrapCmp = document.querySelector('shadow-ssr-parent-cmp');
-    const nestedCmp = wrapCmp.shadowRoot.querySelector('scoped-ssr-child-cmp');
-    expect(nestedCmp.childNodes.length).toBe(1);
-    expect((nestedCmp.childNodes[0] as HTMLElement).tagName).toBe('SLOT');
-
     // check that <style> tag for `scoped-cmp` gets added
     expect(wrapCmp.shadowRoot.querySelector('style[sty-id="sc-scoped-ssr-child-cmp"]')).toBeTruthy();
   });
 
-  it('slots nodes appropriately in a `scoped: true` parent with `serializeShadowRoot: "scoped"` child', async () => {
+  it('scoped components forward slots into shadow components', async () => {
     if (document.querySelector('#stage')) {
       document.querySelector('#stage')?.remove();
       await browser.waitUntil(async () => !document.querySelector('#stage'));
@@ -474,11 +470,52 @@ describe('Sanity check SSR > Client hydration', () => {
       `
       <div>
         <scoped-ssr-parent-cmp>
+          <!-- 1 -->
+          2
+          <div>3</div>
+          <!-- 4 -->
+        </scoped-ssr-parent-cmp
+      </div>`,
+      {
+        fullDocument: true,
+        serializeShadowRoot: 'scoped',
+      },
+    );
+    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('shadow-ssr-parent-cmp'));
+    expect(typeof customElements.get('scoped-ssr-parent-cmp')).toBe('function');
+
+    const wrapCmp = document.querySelector('scoped-ssr-parent-cmp');
+    const children = wrapCmp.childNodes;
+    // check that <style> tag for `scoped-cmp` gets added
+    expect(children.length).toBe(4);
+    expect(children[0].nodeValue).toBe(' 1 ');
+    expect(children[1].textContent).toBe(' 2 ');
+    expect(children[2].textContent).toBe('3');
+    expect((children[2] as Element).checkVisibility()).toBe(true);
+    expect(children[3].nodeValue).toBe(' 4 ');
+  });
+
+  it('slots nodes appropriately in a `scoped: true` parent with `serializeShadowRoot: "scoped"` child', async () => {
+    if (document.querySelector('#stage')) {
+      document.querySelector('#stage')?.remove();
+      await browser.waitUntil(async () => !document.querySelector('#stage'));
+    }
+    const { html } = await renderToString(
+      `<scoped-ssr-parent-cmp>
           <div slot="things">one</div>
           <div slot="things">2</div>
           <div slot="things">3</div>
-        </scoped-ssr-parent-cmp>
-      </div>`,
+        </scoped-ssr-parent-cmp>`,
       {
         fullDocument: true,
         serializeShadowRoot: 'scoped',
@@ -500,6 +537,9 @@ describe('Sanity check SSR > Client hydration', () => {
     const wrapCmp = document.querySelector('scoped-ssr-parent-cmp');
     expect(wrapCmp.childNodes.length).toBe(3);
     expect(wrapCmp.textContent).toBe('one23');
+    expect(wrapCmp.children[0].checkVisibility()).toBe(true);
+    expect(wrapCmp.children[1].checkVisibility()).toBe(true);
+    expect(wrapCmp.children[2].checkVisibility()).toBe(true);
   });
 
   it('correctly renders a slow to hydrate component with a prop', async () => {

test/wdio/ssr-hydration/order-cmp.tsx

@@ -14,9 +14,8 @@ export class MyApp {
   render() {
     return (
       <Host>
-        <div>
-          <slot />
-        </div>
+        Order component. Shadow.
+        <slot />
       </Host>
     );
   }

test/wdio/ssr-hydration/scoped-parent-cmp.tsx

@@ -2,7 +2,7 @@ import { Component, h, Host } from '@stencil/core';
 
 @Component({
   tag: 'scoped-ssr-parent-cmp',
-  shadow: true,
+  scoped: true,
   styles: `
     :host {
       display: block;
@@ -15,12 +15,11 @@ export class MyApp {
     return (
       <Host>
         <div>
+          Scoped parent with named slot.
           <shadow-ssr-child-cmp>
+            <slot />
             <slot name="things" />
           </shadow-ssr-child-cmp>
-          <div>
-            <slot />
-          </div>
         </div>
       </Host>
     );

test/wdio/ssr-hydration/shadow-child-cmp.tsx

@@ -2,7 +2,7 @@ import { Component, h, Host } from '@stencil/core';
 
 @Component({
   tag: 'shadow-ssr-child-cmp',
-  scoped: true,
+  shadow: true,
   styles: `
     :host {
       display: block;
@@ -15,7 +15,10 @@ export class MyApp {
     return (
       <Host>
         <div>
-          <slot />
+          Shadow Child 1.
+          <ssr-order-cmp>
+            <slot />
+          </ssr-order-cmp>
         </div>
       </Host>
     );