refactor: fix forwarded light DOM slots mapping

packages/@lwc/engine-core/src/framework/api.ts

@@ -50,6 +50,8 @@ import {
     VText,
     VStaticPart,
     VStaticPartData,
+    isVBaseElement,
+    isVStatic,
 } from './vnodes';
 import { getComponentRegisteredName } from './component';
 
@@ -92,6 +94,7 @@ function st(fragment: Element, key: Key, parts?: VStaticPart[]): VStatic {
         fragment,
         owner,
         parts,
+        slotAssignment: undefined,
     };
 
     return vnode;
@@ -160,7 +163,7 @@ function h(sel: string, data: VElementData, children: VNodes = EmptyArray): VEle
         });
     }
 
-    const { key } = data;
+    const { key, slotAssignment } = data;
 
     const vnode: VElement = {
         type: VNodeType.Element,
@@ -170,6 +173,7 @@ function h(sel: string, data: VElementData, children: VNodes = EmptyArray): VEle
         elm: undefined,
         key,
         owner: vmBeingRendered,
+        slotAssignment,
     };
 
     return vnode;
@@ -207,6 +211,10 @@ function s(
         assert.isTrue(isObject(data), `s() 2nd argument data must be an object.`);
         assert.isTrue(isArray(children), `h() 3rd argument children must be an array.`);
     }
+
+    const vmBeingRendered = getVMBeingRendered()!;
+    const { renderMode } = vmBeingRendered;
+
     if (
         !isUndefined(slotset) &&
         !isUndefined(slotset.slotAssignments) &&
@@ -236,7 +244,6 @@ function s(
                 }
                 // If the passed slot content is factory, evaluate it and add the produced vnodes
                 if (assignedNodeIsScopedSlot) {
-                    const vmBeingRenderedInception = getVMBeingRendered();
                     // Evaluate in the scope of the slot content's owner
                     // if a slotset is provided, there will always be an owner. The only case where owner is
                     // undefined is for root components, but root components cannot accept slotted content
@@ -249,19 +256,32 @@ function s(
                             ArrayPush.call(newChildren, vnode.factory(data.slotData, data.key));
                         });
                     } finally {
-                        setVMBeingRendered(vmBeingRenderedInception);
+                        setVMBeingRendered(vmBeingRendered);
                     }
                 } else {
+                    // This block is for standard slots (non-scoped slots)
+                    let clonedVNode;
+                    if (
+                        renderMode === RenderMode.Light &&
+                        (isVBaseElement(vnode) || isVStatic(vnode)) &&
+                        vnode.slotAssignment !== data.slotAssignment
+                    ) {
+                        // When the light DOM slot assignment (slot attribute) changes we can't use the same reference
+                        // to the vnode because the current way the diffing algo works, it will replace the original reference
+                        // to the host element with a new one. This means the new element will be mounted and immediately unmounted.
+                        // Creating a copy of the vnode to preserve a reference to the previous host element.
+                        clonedVNode = { ...vnode };
+                        clonedVNode.slotAssignment = data.slotAssignment;
+                    }
                     // If the slot content is standard type, the content is static, no additional
                     // processing needed on the vnode
-                    ArrayPush.call(newChildren, vnode);
+                    ArrayPush.call(newChildren, clonedVNode ?? vnode);
                 }
             }
         }
         children = newChildren;
     }
-    const vmBeingRendered = getVMBeingRendered()!;
-    const { renderMode, shadowMode, apiVersion } = vmBeingRendered;
+    const { shadowMode, apiVersion } = vmBeingRendered;
 
     if (renderMode === RenderMode.Light) {
         // light DOM slots - backwards-compatible behavior uses flattening, new behavior uses fragments
@@ -324,7 +344,7 @@ function c(
             });
         }
     }
-    const { key } = data;
+    const { key, slotAssignment } = data;
     let elm, aChildren, vm;
     const vnode: VCustomElement = {
         type: VNodeType.CustomElement,
@@ -333,6 +353,7 @@ function c(
         children,
         elm,
         key,
+        slotAssignment,
 
         ctor: Ctor,
         owner: vmBeingRendered,

packages/@lwc/engine-core/src/framework/modules/attrs.ts

@@ -15,7 +15,7 @@ import {
 import { RendererAPI } from '../renderer';
 
 import { EmptyObject } from '../utils';
-import { VBaseElement } from '../vnodes';
+import { VBaseElement, VStatic } from '../vnodes';
 
 const ColonCharCode = 58;
 
@@ -63,3 +63,22 @@ export function patchAttributes(
         }
     }
 }
+
+export function patchSlotAssignment(
+    oldVnode: VBaseElement | VStatic | null,
+    vnode: VBaseElement | VStatic,
+    renderer: RendererAPI
+) {
+    if (oldVnode?.slotAssignment === vnode.slotAssignment) {
+        return;
+    }
+
+    const { elm } = vnode;
+    const { setAttribute, removeAttribute } = renderer;
+
+    if (isUndefined(vnode.slotAssignment) || isNull(vnode.slotAssignment)) {
+        removeAttribute(elm, 'slot');
+    } else {
+        setAttribute(elm, 'slot', vnode.slotAssignment);
+    }
+}

packages/@lwc/engine-core/src/framework/rendering.ts

@@ -47,6 +47,7 @@ import {
     isVCustomElement,
     isVFragment,
     isVScopedSlotFragment,
+    isVStatic,
     Key,
     VBaseElement,
     VComment,
@@ -60,7 +61,7 @@ import {
     VText,
 } from './vnodes';
 
-import { patchAttributes } from './modules/attrs';
+import { patchAttributes, patchSlotAssignment } from './modules/attrs';
 import { patchProps } from './modules/props';
 import { patchClassAttribute } from './modules/computed-class-attr';
 import { patchStyleAttribute } from './modules/computed-style-attr';
@@ -265,6 +266,7 @@ function mountElement(
 function patchStatic(n1: VStatic, n2: VStatic, renderer: RendererAPI) {
     const elm = (n2.elm = n1.elm!);
 
+    patchSlotAssignment(n1, n2, renderer);
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
     applyStaticParts(elm, n2, renderer, false);
 }
@@ -298,6 +300,7 @@ function mountStatic(
         }
     }
 
+    patchSlotAssignment(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     applyStaticParts(elm, vnode, renderer, true);
 }
@@ -597,6 +600,7 @@ function patchElementPropsAndAttrsAndRefs(
 
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
+    patchSlotAssignment(oldVnode, vnode, renderer);
 
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
     applyRefs(vnode, vnode.owner);
@@ -795,8 +799,8 @@ function allocateInSlot(vm: VM, children: VNodes, owner: VM) {
         }
 
         let slotName: unknown = '';
-        if (isVBaseElement(vnode)) {
-            slotName = vnode.data.attrs?.slot ?? '';
+        if (isVBaseElement(vnode) || isVStatic(vnode)) {
+            slotName = vnode.slotAssignment ?? '';
         } else if (isVScopedSlotFragment(vnode)) {
             slotName = vnode.slotName;
         }

packages/@lwc/engine-core/src/framework/vnodes.ts

@@ -63,6 +63,7 @@ export interface VStatic extends BaseVNode {
     readonly fragment: Element;
     readonly parts: VStaticPart[] | undefined;
     elm: Element | undefined;
+    slotAssignment: string | undefined;
 }
 
 export interface VFragment extends BaseVNode, BaseVParent {
@@ -99,6 +100,7 @@ export interface VBaseElement extends BaseVNode, BaseVParent {
     data: VElementData;
     elm: Element | undefined;
     key: Key;
+    slotAssignment: string | undefined;
 }
 
 export interface VElement extends VBaseElement {
@@ -134,6 +136,8 @@ export interface VElementData extends VNodeData {
     readonly external?: boolean;
     readonly ref?: string;
     readonly slotData?: any;
+    // Corresponds to the slot attribute of the element and indicates which `slot` element it should be assigned to
+    readonly slotAssignment?: string;
 }
 
 export function isVBaseElement(vnode: VNode): vnode is VElement | VCustomElement {
@@ -156,3 +160,7 @@ export function isVFragment(vnode: VNode): vnode is VFragment {
 export function isVScopedSlotFragment(vnode: VNode): vnode is VScopedSlotFragment {
     return vnode.type === VNodeType.ScopedSlotFragment;
 }
+
+export function isVStatic(vnode: VNode): vnode is VStatic {
+    return vnode.type === VNodeType.Static;
+}

packages/@lwc/integration-karma/test/act/act-components/test-multiple-slots.js

@@ -27,9 +27,7 @@ export default function (define) {
                                 'ui-something',
                                 _uiSomething__default['default'],
                                 {
-                                    attrs: {
-                                        slot: 'first',
-                                    },
+                                    slotAssignment: 'first',
                                     props: {
                                         text: 'Hello',
                                     },
@@ -41,9 +39,7 @@ export default function (define) {
                                 'ui-another',
                                 _uiAnother__default['default'],
                                 {
-                                    attrs: {
-                                        slot: 'second',
-                                    },
+                                    slotAssignment: 'second',
                                     props: {
                                         value: 'Foo',
                                     },

packages/@lwc/integration-karma/test/act/act-components/test-slot-adjacent-to-named-slot.js

@@ -27,9 +27,7 @@ export default function (define) {
                                 'ui-another',
                                 _uiAnother__default['default'],
                                 {
-                                    attrs: {
-                                        slot: 'adjacent',
-                                    },
+                                    slotAssignment: 'adjacent',
                                     props: {
                                         value: 'Foo',
                                     },

packages/@lwc/integration-karma/test/act/act-components/test-slot-in-grandchild.js

@@ -27,9 +27,7 @@ export default function (define) {
                                 'ui-something',
                                 _uiSomething__default['default'],
                                 {
-                                    attrs: {
-                                        slot: 'first',
-                                    },
+                                    slotAssignment: 'first',
                                     props: {
                                         text: 'Hello',
                                     },
@@ -40,9 +38,7 @@ export default function (define) {
                                         'ui-another',
                                         _uiAnother__default['default'],
                                         {
-                                            attrs: {
-                                                slot: 'second',
-                                            },
+                                            slotAssignment: 'second',
                                             props: {
                                                 value: 'Foo',
                                             },

packages/@lwc/integration-karma/test/light-dom/scoped-slot/index.spec.js

@@ -61,7 +61,7 @@ describe('scoped slots', () => {
         // For standard slot content, "slot" attribute goes directly on the element unlike scoped
         //  slots where the attribute goes on the template tag
         expect(child.querySelector('.slotname3').innerHTML).toBe(
-            `${vFragBookend}<p slot="slotname3">MLB</p>${vFragBookend}`
+            `${vFragBookend}<p>MLB</p>${vFragBookend}`
         );
     });
 

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

@@ -0,0 +1,30 @@
+import { createElement } from 'lwc';
+
+import LightContainer from './x/lightContainer/lightContainer';
+
+describe('scoped slots, slot forwarding', () => {
+    let lightContainer;
+    beforeAll(() => {
+        lightContainer = createElement('x-light-container', { is: LightContainer });
+        document.body.appendChild(lightContainer);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(lightContainer);
+    });
+
+    it('does not reassign slot content', () => {
+        const leaf = lightContainer.querySelector('x-leaf');
+        expect(leaf.shadowRoot.children.length).toEqual(2);
+
+        const defaultSlot = leaf.shadowRoot.querySelector('slot');
+        const defaultSlotContent = defaultSlot.assignedNodes();
+        expect(defaultSlotContent.length).toEqual(1);
+        expect(defaultSlotContent[0].innerText).toEqual('Hello world!');
+
+        const fooSlot = leaf.shadowRoot.querySelector('[name="foo"]');
+        const fooSlotContent = fooSlot.assignedNodes();
+        // Note the slot reassignment does not work on scoped slots
+        expect(fooSlotContent.length).toEqual(0);
+    });
+});

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/scoped-slots/x/leaf/leaf.html

@@ -0,0 +1,4 @@
+<template>
+    <slot></slot>
+    <slot name="foo"></slot>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/scoped-slots/x/leaf/leaf.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/scoped-slots/x/lightContainer/lightContainer.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <x-scoped-slot-parent></x-scoped-slot-parent>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/scoped-slots/x/lightContainer/lightContainer.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/scoped-slots/x/scopedSlotChild/scopedSlotChild.html

@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-leaf>
+        <!-- Note the slot mapping does not work for scoped slots -->
+        <slot lwc:slot-bind={title} slot="foo"></slot>
+    </x-leaf>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/scoped-slots/x/scopedSlotChild/scopedSlotChild.js

@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+
+    title = 'Hello world!';
+}

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/scoped-slots/x/scopedSlotParent/scopedSlotParent.html

@@ -0,0 +1,7 @@
+<template lwc:render-mode="light">
+    <x-scoped-slot-child>
+        <template lwc:slot-data="title">
+            <h2>{title}</h2>
+        </template>
+    </x-scoped-slot-child>
+</template>

packages/@lwc/integration-karma/test/light-dom/slot-fowarding/scoped-slots/x/scopedSlotParent/scopedSlotParent.js

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