fix(runtime): scoped: true slot fallback with forwarded slot (#6171)

* fix(runtime): `scoped: true` slot fallback with forwarded slot

* chore:

---------

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Author: johnjenkins

src/runtime/slot-polyfill-utils.ts

@@ -26,7 +26,7 @@ export const updateFallbackSlotVisibility = (elm: d.RenderNode) => {
     getHostSlotNodes(childNodes as any, (elm as HTMLElement).tagName).forEach((slotNode) => {
       if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === 'SLOT-FB') {
         // this is a slot fallback node
-        if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false)?.length) {
+        if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) {
           // has slotted nodes, hide fallback
           slotNode.hidden = true;
         } else {
@@ -108,7 +108,7 @@ export const getSlotChildSiblings = (slot: d.RenderNode, slotName: string, inclu
   let node = slot;
 
   while ((node = node.nextSibling as any)) {
-    if (getSlotName(node) === slotName) childNodes.push(node as any);
+    if (getSlotName(node) === slotName && (includeSlot || !node['s-sr'])) childNodes.push(node as any);
   }
   return childNodes;
 };

src/runtime/test/hydrate-slot-fallback.spec.tsx

@@ -443,7 +443,7 @@ describe('hydrate, slot fallback', () => {
         return (
           <article>
             <cmp-b>
-              <slot>Fallback content parent - should not be hidden</slot>
+              <slot>Fallback content parent - should be hidden</slot>
             </cmp-b>
           </article>
         );
@@ -458,7 +458,7 @@ describe('hydrate, slot fallback', () => {
       render() {
         return (
           <section>
-            <slot>Fallback content child - should be hidden</slot>
+            <slot>Fallback content child - should not be hidden</slot>
           </section>
         );
       }
@@ -479,13 +479,13 @@ describe('hydrate, slot fallback', () => {
             <!--r.2-->
             <!--o.1.2.-->
             <section c-id=\"2.0.0.0\">
-              <slot-fb c-id=\"2.1.1.0\" hidden=\"\" s-sn=\"\">
+              <slot-fb c-id=\"2.1.1.0\" s-sn=\"\">
                 <!--t.2.2.2.0-->
-                Fallback content child - should be hidden
+                Fallback content child - should not be hidden
               </slot-fb>
               <slot-fb c-id=\"1.2.2.0\" s-sn=\"\">
                 <!--t.1.3.3.0-->
-                Fallback content parent - should not be hidden
+                Fallback content parent - should be hidden
               </slot-fb>
             </section>
           </cmp-b>
@@ -507,12 +507,12 @@ describe('hydrate, slot fallback', () => {
             <mock:shadow-root>
               <section>
                 <slot>
-                  Fallback content child - should be hidden
+                  Fallback content child - should not be hidden
                 </slot>
               </section>
             </mock:shadow-root>
             <slot-fb class="sc-cmp-a">
-              Fallback content parent - should not be hidden
+              Fallback content parent - should be hidden
             </slot-fb>
           </cmp-b>
         </article>

test/wdio/slot-fallback-with-forwarded-slot/child-component.tsx

@@ -0,0 +1,24 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'slot-forward-child-fallback',
+  scoped: true,
+  styles: `
+    :host {
+      display: block;
+    }
+  `,
+})
+export class ChildComponent {
+  @Prop() label: string;
+
+  render() {
+    return (
+      <Host>
+        <div>
+          <slot name="label">{this.label}</slot>
+        </div>
+      </Host>
+    );
+  }
+}

test/wdio/slot-fallback-with-forwarded-slot/cmp.test.tsx

@@ -0,0 +1,51 @@
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('slot-fallback-with-forwarded-slot', () => {
+  it('renders fallback via prop', async () => {
+    // @ts-expect-error - wdio complaining about missing prop
+    const { $root, root } = render({
+      template: () => <slot-forward-root label="Slot fallback via property"></slot-forward-root>,
+    });
+    await $root.$('slot-fb');
+    const fb: HTMLElement = document.querySelector('slot-fb');
+
+    expect(await $root.getText()).toBe('');
+    expect(fb.textContent).toBe('Slot fallback via property');
+    expect(fb.getAttribute('hidden')).toBe(null);
+    expect(fb.hidden).toBe(false);
+
+    const p = document.createElement('p');
+    p.textContent = 'Slot content via slot';
+    p.slot = 'label';
+    root.appendChild(p);
+
+    expect(await $root.getText()).toBe('Slot content via slot');
+    expect(fb.getAttribute('hidden')).toBe('');
+    expect(fb.hidden).toBe(true);
+  });
+
+  it('should hide slot-fb elements when slotted content exists', async () => {
+    // @ts-expect-error - wdio complaining about missing prop
+    const { $root, root } = render({
+      template: () => (
+        <slot-forward-root label="Slot fallback via property">
+          <div slot="label">Slot content via slot</div>
+        </slot-forward-root>
+      ),
+    });
+    await $root.$('slot-fb');
+    const fb: HTMLElement = document.querySelector('slot-fb');
+
+    expect(await $root.getText()).toBe('Slot content via slot');
+    expect(fb.textContent).toBe('Slot fallback via property');
+    expect(fb.getAttribute('hidden')).toBe('');
+    expect(fb.hidden).toBe(true);
+
+    root.removeChild(root.childNodes[0]);
+
+    expect(await $root.getText()).toBe('');
+    expect(fb.getAttribute('hidden')).toBe(null);
+    expect(fb.hidden).toBe(false);
+  });
+});

test/wdio/slot-fallback-with-forwarded-slot/parent-component.tsx

@@ -0,0 +1,24 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'slot-forward-root',
+  scoped: true,
+  styles: `
+    :host {
+      display: block;
+    }
+  `,
+})
+export class MyComponent {
+  @Prop() label: string;
+
+  render() {
+    return (
+      <Host>
+        <slot-forward-child-fallback label={this.label}>
+          <slot name="label" />
+        </slot-forward-child-fallback>
+      </Host>
+    );
+  }
+}