fix(vdom): hide fallback slot when content present in scoped/non-shadow components (#2650)

Author: WickyNilliams

src/runtime/vdom/test/scoped-slot.spec.tsx

@@ -755,4 +755,48 @@ describe('scoped slot', () => {
     // expect(root.firstElementChild.firstElementChild.children[1].firstElementChild.children[1].nodeName).toBe('GOAT');
     // expect(root.firstElementChild.firstElementChild.children[1].firstElementChild.children[1].textContent).toBe('hey goat!');
   });
+
+  it('should hide the slot\'s fallback content for a scoped component when slot content passed in', async () => {
+    @Component({ tag: 'fallback-test', scoped: true })
+    class ScopedFallbackSlotTest {
+      render() {
+        return (
+          <div>
+            <slot>
+              <p>Fallback Content</p>
+            </slot>
+          </div>
+        );
+      }
+    }
+    const { root } = await newSpecPage({
+      components: [ScopedFallbackSlotTest],
+      html: `<fallback-test><span>Content</span></fallback-test>`,
+    });
+
+    expect(root.firstElementChild.children[1].nodeName).toBe('SLOT-FB');
+    expect(root.firstElementChild.children[1]).toHaveAttribute('hidden');
+  });
+
+  it('should hide the slot\'s fallback content for a non-shadow component when slot content passed in', async () => {
+    @Component({ tag: 'fallback-test', shadow: false })
+    class NonShadowFallbackSlotTest {
+      render() {
+        return (
+          <div>
+            <slot>
+              <p>Fallback Content</p>
+            </slot>
+          </div>
+        );
+      }
+    }
+    const { root } = await newSpecPage({
+      components: [NonShadowFallbackSlotTest],
+      html: `<fallback-test><span>Content</span></fallback-test>`,
+    });
+
+    expect(root.firstElementChild.children[1].nodeName).toBe('SLOT-FB');
+    expect(root.firstElementChild.children[1]).toHaveAttribute('hidden');
+  });
 });

src/runtime/vdom/vdom-render.ts

@@ -418,24 +418,24 @@ const updateFallbackSlotVisibility = (elm: d.RenderNode) => {
         childNode.hidden = false;
 
         for (j = 0; j < ilen; j++) {
-          if (childNodes[j]['s-hn'] !== childNode['s-hn']) {
-            // this sibling node is from a different component
-            nodeType = childNodes[j].nodeType;
-
-            if (slotNameAttr !== '') {
-              // this is a named fallback slot node
-              if (nodeType === NODE_TYPE.ElementNode && slotNameAttr === childNodes[j].getAttribute('slot')) {
-                childNode.hidden = true;
-                break;
-              }
-            } else {
-              // this is a default fallback slot node
-              // any element or text node (with content)
-              // should hide the default fallback slot node
-              if (nodeType === NODE_TYPE.ElementNode || (nodeType === NODE_TYPE.TextNode && childNodes[j].textContent.trim() !== '')) {
-                childNode.hidden = true;
-                break;
-              }
+          nodeType = childNodes[j].nodeType;
+
+          if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
+            // this sibling node is from a different component OR is a named fallback slot node
+            if (nodeType === NODE_TYPE.ElementNode && slotNameAttr === childNodes[j].getAttribute('slot')) {
+              childNode.hidden = true;
+              break;
+            }
+          } else {
+            // this is a default fallback slot node
+            // any element or text node (with content)
+            // should hide the default fallback slot node
+            if (
+              nodeType === NODE_TYPE.ElementNode ||
+              (nodeType === NODE_TYPE.TextNode && childNodes[j].textContent.trim() !== '')
+            ) {
+              childNode.hidden = true;
+              break;
             }
           }
         }