test: repro light dom slot forwarding bug

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/index.spec.js

@@ -0,0 +1,59 @@
+import { createElement } from 'lwc';
+import LightContainer from 'light/container';
+import ShadowContainer from 'shadow/container';
+
+const scenarios = [
+    {
+        name: 'light',
+        tagName: 'light-container',
+        Ctor: LightContainer,
+    },
+    {
+        name: 'shadow',
+        tagName: 'shadow-container',
+        Ctor: ShadowContainer,
+    },
+];
+
+scenarios.forEach(({ name, tagName, Ctor }) => {
+    describe(name, () => {
+        // The bug is originally in light DOM, but the shadow DOM tests are just to demonstrate
+        // that the same LWC templates work correctly in shadow DOM mode.
+        it('issue #4446 - duplicate named slots with slot forwarding and reactivity', async () => {
+            const elm = createElement(tagName, { is: Ctor });
+
+            document.body.appendChild(elm);
+
+            // step 1 - initial render with isTablet=false
+            await Promise.resolve();
+
+            let header, menu, span;
+
+            const assertExpectedHtml = () => {
+                const root = elm.shadowRoot || elm;
+                header = root.querySelector('light-header,shadow-header');
+                menu = root.querySelector('light-menu,shadow-menu');
+                span = root.querySelector('span');
+
+                expect(header).not.toBeNull();
+                expect(menu).not.toBeNull();
+                expect(span).not.toBeNull();
+                expect(span.textContent).toBe('Hello');
+            };
+
+            assertExpectedHtml();
+
+            // step 2 - change child property without going through the parent
+            header.isTablet = true;
+            await Promise.resolve();
+
+            assertExpectedHtml();
+
+            // step 3 - toggle back to original state
+            header.isTablet = false;
+            await Promise.resolve();
+
+            assertExpectedHtml();
+        });
+    });
+});

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/light/container/container.html

@@ -0,0 +1,7 @@
+<template lwc:render-mode="light">
+    <light-header>
+        <light-menu slot="navigation">
+            <span slot="mobile">Hello</span>
+        </light-menu>
+    </light-header>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/light/container/container.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/light/header/header.html

@@ -0,0 +1,8 @@
+<template lwc:render-mode="light">
+    <div lwc:if={isTablet}>
+        <slot name="navigation"></slot>
+    </div>
+    <div lwc:else>
+        <slot name="navigation"></slot>
+    </div>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/light/header/header.js

@@ -0,0 +1,7 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+
+    @api isTablet = false;
+}

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/light/menu/menu.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <slot name="mobile"></slot>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/light/menu/menu.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/shadow/container/container.html

@@ -0,0 +1,7 @@
+<template lwc:render-mode="shadow">
+    <shadow-header>
+        <shadow-menu slot="navigation">
+            <span slot="mobile">Hello</span>
+        </shadow-menu>
+    </shadow-header>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/shadow/container/container.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'shadow';
+}

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/shadow/header/header.html

@@ -0,0 +1,8 @@
+<template lwc:render-mode="shadow">
+    <div lwc:if={isTablet}>
+        <slot name="navigation"></slot>
+    </div>
+    <div lwc:else>
+        <slot name="navigation"></slot>
+    </div>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/shadow/header/header.js

@@ -0,0 +1,7 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'shadow';
+
+    @api isTablet = false;
+}

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/shadow/menu/menu.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="shadow">
+    <slot name="mobile"></slot>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/slots/duplicates/shadow/menu/menu.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'shadow';
+}