fix(ssr): named slot dom order with serializeShadowRoot: 'scoped' components (#6300)

* fix(ssr): expand ::part css selectors for ssr `scoped` components

* chore: lint

* fix(ssr): `serializeShadowRoot: 'scoped'` named slot DOM order

* chore: fix test

---------

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

Author: johnjenkins

src/runtime/client-hydrate.ts

@@ -619,7 +619,7 @@ function addSlot(
       parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
     } else {
       // Insert the new slot element before the slot comment
-      node.parentNode.insertBefore(childVNode.$elm$, node);
+      node.parentNode.insertBefore(slot, node);
     }
     addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
 
@@ -645,9 +645,9 @@ function addSlot(
       // Move slot comment node (to after any other comment nodes)
       parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
     }
-    childRenderNodes.push(childVNode);
   }
 
+  childRenderNodes.push(childVNode);
   slotNodes.push(childVNode);
 
   if (!parentVNode.$children$) {

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

@@ -60,7 +60,6 @@ describe('hydrate, shadow in shadow', () => {
             <mock:shadow-root>
               <slot></slot>
             </mock:shadow-root>
-            <!---->
             <slot></slot>
           </cmp-b>
         </mock:shadow-root>

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

@@ -386,4 +386,41 @@ describe('Sanity check SSR > Client hydration', () => {
 
     await expect(getComputedStyle(childComponentPart).backgroundColor).toBe('rgb(255, 192, 203)'); // pink
   });
+
+  it('renders named slots in the correct order in the DOM in scoped components', async () => {
+    if (document.querySelector('#stage')) {
+      document.querySelector('#stage')?.remove();
+      await browser.waitUntil(async () => !document.querySelector('#stage'));
+    }
+    const { html } = await renderToString(
+      `
+      <div>
+        <ssr-order-wrap-cmp>
+          <div slot="things">one</div>
+          <div slot="things">2</div>
+          <div slot="things">3</div>
+        </ssr-order-wrap-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('ssr-order-wrap-cmp'));
+    expect(typeof customElements.get('ssr-order-wrap-cmp')).toBe('function');
+
+    const nestedCmp = document.querySelector('ssr-order-wrap-cmp').shadowRoot.querySelector('ssr-order-cmp');
+    expect((nestedCmp.childNodes[0] as HTMLElement).tagName).toBe('SLOT');
+    expect(nestedCmp.childNodes[1].textContent).toBe('after');
+  });
 });

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

@@ -0,0 +1,23 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'ssr-order-cmp',
+  shadow: true,
+  styles: `
+    :host {
+      display: block;
+      border: 3px solid red;
+    }
+  `,
+})
+export class MyApp {
+  render() {
+    return (
+      <Host>
+        <div>
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'ssr-order-wrap-cmp',
+  shadow: true,
+  styles: `
+    :host {
+      display: block;
+      border: 3px solid blue;
+    }
+  `,
+})
+export class MyApp {
+  render() {
+    return (
+      <Host>
+        <div>
+          <ssr-order-cmp>
+            <slot name="things" />
+            <div class="AFTER">after</div>
+          </ssr-order-cmp>
+          <div>
+            <slot />
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}