fix(slot-fallback): fix hiding fallback slot content issue when the s…

…lotted element is a text node (#5496)

* fix(slot-fallback): fix hiding fallback slot content issue when the slotted element is a text node

* test: fix test related reviews

* test: fix test related reviews

* Update test/wdio/slot-fallback-with-textnode/cmp.test.tsx

---------

Co-authored-by: Christian Bromann <git@bromann.dev>

src/runtime/vdom/vdom-render.ts

@@ -736,8 +736,9 @@ export const updateFallbackSlotVisibility = (elm: d.RenderNode) => {
               // this sibling node is from a different component OR is a named
               // fallback slot node
               if (
-                siblingNode.nodeType === NODE_TYPE.ElementNode &&
-                (slotName === siblingNode.getAttribute('slot') || slotName === siblingNode['s-sn'])
+                (siblingNode.nodeType === NODE_TYPE.ElementNode &&
+                  (slotName === siblingNode.getAttribute('slot') || slotName === siblingNode['s-sn'])) ||
+                (siblingNode.nodeType === NODE_TYPE.TextNode && slotName === siblingNode['s-sn'])
               ) {
                 childNode.hidden = true;
                 break;

test/wdio/slot-fallback-with-textnode/cmp-avatar.tsx

@@ -0,0 +1,16 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'cmp-avatar',
+  shadow: false,
+  scoped: true,
+})
+export class CmpAvatar {
+  render() {
+    return (
+      <div class="container">
+        <slot>DEFAULT</slot>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('slot-fallback-with-textnode', function () {
+  beforeEach(() => {
+    render({
+      template: () => <my-component></my-component>,
+    });
+  });
+
+  it('should hide fallback content when provided slot is text node', async () => {
+    await expect($('.container')).toHaveText('DEFAULT', { trim: true });
+    await $('#toggle-button').click();
+
+    await expect($('.container')).not.toHaveText('DEFAULT', { trim: true });
+    await expect($('.container')).toHaveText('JD', { trim: true });
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Component, Fragment, h, State } from '@stencil/core';
+
+@Component({
+  tag: 'my-component',
+  shadow: false,
+  scoped: true,
+})
+export class MyComponent {
+  @State() shortName: null | string;
+
+  render() {
+    return (
+      <Fragment>
+        <cmp-avatar>{this.shortName}</cmp-avatar>
+        <button id="toggle-button" onClick={() => (this.shortName = this.shortName ? null : 'JD')}>
+          Toggle ShortName
+        </button>
+      </Fragment>
+    );
+  }
+}