fix: prevent prematurely cloning light dom slot vnodes

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

@@ -279,7 +279,15 @@ function s(
                         // 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, slotAssignment: data.slotAssignment };
+                        if (isUndefined(vnode.elm)) {
+                            // vnode.elm is undefined during initial render.
+                            // We don't need to clone at this point because it doesn't need to be unmounted.
+                            vnode.slotAssignment = data.slotAssignment;
+                        } else {
+                            // Clone when the vnode.elm is defined to ensure we don't lose reference to the previous element.
+                            // This is specifically for slot forwarding.
+                            clonedVNode = { ...vnode, slotAssignment: data.slotAssignment };
+                        }
                     }
                     // If the slot content is standard type, the content is static, no additional
                     // processing needed on the vnode

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

@@ -0,0 +1,172 @@
+import { createElement } from 'lwc';
+import { extractDataIds, USE_LIGHT_DOM_SLOT_FORWARDING } from 'test-utils';
+
+import SlotForwarding from 'x/slotForwarding';
+import DynamicSlotForwarding from 'x/dynamicSlotForwarding';
+import StandardSlotting from 'x/standardSlotting';
+
+import { resetId } from './util.js';
+
+const resetTimingBuffer = () => {
+    window.timingBuffer = [];
+};
+
+describe('standard slotting', () => {
+    beforeEach(() => {
+        window.timingBuffer = [];
+        resetId();
+    });
+
+    afterEach(() => {
+        delete window.timingBuffer;
+    });
+
+    it('invokes lifecycle methods in correct order', async () => {
+        const elm = createElement('x-standard-slotting', { is: StandardSlotting });
+        elm.show = true;
+        document.body.appendChild(elm);
+        await Promise.resolve();
+
+        expect(window.timingBuffer).toEqual([
+            '0:connectedCallback',
+            '1:connectedCallback',
+            '2:connectedCallback',
+        ]);
+
+        resetTimingBuffer();
+
+        elm.show = false;
+        await Promise.resolve();
+
+        expect(window.timingBuffer).toEqual([
+            '0:disconnectedCallback',
+            '1:disconnectedCallback',
+            '2:disconnectedCallback',
+        ]);
+    });
+});
+
+if (USE_LIGHT_DOM_SLOT_FORWARDING) {
+    describe('slot forwarding', () => {
+        beforeEach(() => {
+            window.timingBuffer = [];
+            resetId();
+        });
+
+        afterEach(() => {
+            delete window.timingBuffer;
+        });
+
+        it('invokes lifecycle methods in correct order - static', async () => {
+            const elm = createElement('x-slot-forwarding', { is: SlotForwarding });
+            document.body.appendChild(elm);
+            await Promise.resolve();
+
+            expect(window.timingBuffer).toEqual([
+                '0:connectedCallback',
+                '1:connectedCallback',
+                '2:connectedCallback',
+            ]);
+
+            resetTimingBuffer();
+
+            elm.showTop = true;
+            await Promise.resolve();
+
+            expect(window.timingBuffer).toEqual([
+                '3:connectedCallback',
+                '4:connectedCallback',
+                '5:connectedCallback',
+                '2:disconnectedCallback',
+                '1:disconnectedCallback',
+                '0:disconnectedCallback',
+            ]);
+
+            resetTimingBuffer();
+
+            elm.showTop = false;
+            await Promise.resolve();
+
+            expect(window.timingBuffer).toEqual([
+                '6:connectedCallback',
+                '7:connectedCallback',
+                '8:connectedCallback',
+                '5:disconnectedCallback',
+                '4:disconnectedCallback',
+                '3:disconnectedCallback',
+            ]);
+        });
+
+        it('invokes lifecycle methods in correct order - dynamic', async () => {
+            const elm = createElement('x-dynamic-slot-forwarding', { is: DynamicSlotForwarding });
+            document.body.appendChild(elm);
+            await Promise.resolve();
+
+            // Initial connection
+            expect(window.timingBuffer).toEqual([
+                '0:connectedCallback',
+                '1:connectedCallback',
+                '2:connectedCallback',
+            ]);
+
+            resetTimingBuffer();
+
+            // Trigger vdom diffing
+            elm.showTop = true;
+            await Promise.resolve();
+
+            expect(window.timingBuffer).toEqual([
+                '3:connectedCallback',
+                '4:connectedCallback',
+                '5:connectedCallback',
+                '2:disconnectedCallback',
+                '1:disconnectedCallback',
+                '0:disconnectedCallback',
+            ]);
+
+            resetTimingBuffer();
+
+            // Trigger vdom diffing from top level
+            elm.topTop = 'bottom';
+            elm.topBottom = 'top';
+            await Promise.resolve();
+
+            expect(window.timingBuffer).toEqual([
+                '6:connectedCallback',
+                '5:disconnectedCallback',
+                '7:connectedCallback',
+                '3:disconnectedCallback',
+            ]);
+
+            resetTimingBuffer();
+
+            const { topSlot } = extractDataIds(elm);
+            // Trigger vdom diffing from forwarded slot level
+            topSlot.top = 'top';
+            topSlot.bottom = 'bottom';
+            await Promise.resolve();
+
+            expect(window.timingBuffer).toEqual([
+                '8:connectedCallback',
+                '6:disconnectedCallback',
+                '9:connectedCallback',
+                '7:disconnectedCallback',
+            ]);
+
+            resetTimingBuffer();
+
+            // vdom diffing after changing vnodes
+            elm.showTop = false;
+            await Promise.resolve();
+
+            expect(window.timingBuffer).toEqual([
+                '10:connectedCallback',
+                '11:connectedCallback',
+                '12:connectedCallback',
+                '4:disconnectedCallback',
+                '9:disconnectedCallback',
+                '8:disconnectedCallback',
+            ]);
+        });
+    });
+}

packages/@lwc/integration-karma/test/light-dom/lifecycle/util.js

@@ -0,0 +1,4 @@
+let id = 0;
+
+export const getId = () => id++;
+export const resetId = () => (id = 0);

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/dynamicForwardedSlottable/dynamicForwardedSlottable.html

@@ -0,0 +1,7 @@
+<template lwc:render-mode="light">
+    <x-slottable>
+        <slot name="top" slot={top}></slot>
+        <slot></slot>
+        <slot name="bottom" slot={bottom}></slot>
+    </x-slottable>
+</template>

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/dynamicForwardedSlottable/dynamicForwardedSlottable.js

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

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/dynamicSlotForwarding/dynamicSlotForwarding.html

@@ -0,0 +1,16 @@
+<template lwc:render-mode="light">
+    <template lwc:if={showTop}>
+        <x-dynamic-forwarded-slottable data-id="topSlot">
+            <x-slotee slot={topTop}></x-slotee>
+            <x-slotee></x-slotee>
+            <x-slotee slot={topBottom}></x-slotee>
+        </x-dynamic-forwarded-slottable>
+    </template>
+    <template lwc:else>
+        <x-dynamic-forwarded-slottable data-id="bottomSlot">
+            <x-slotee slot={bottomTop}></x-slotee>
+            <x-slotee></x-slotee>
+            <x-slotee slot={bottomBottom}></x-slotee>
+        </x-dynamic-forwarded-slottable>
+    </template>
+</template>

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/dynamicSlotForwarding/dynamicSlotForwarding.js

@@ -0,0 +1,11 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+
+    @api showTop = false;
+    @api topTop = 'top';
+    @api topBottom = 'bottom';
+    @api bottomTop = 'top';
+    @api bottomBottom = 'bottom';
+}

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/forwardedSlottable/forwardedSlottable.html

@@ -0,0 +1,7 @@
+<template lwc:render-mode="light">
+    <x-slottable>
+        <slot name="top" slot="bottom"></slot>
+        <slot></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-slottable>
+</template>

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/forwardedSlottable/forwardedSlottable.js

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

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/slotForwarding/slotForwarding.html

@@ -0,0 +1,16 @@
+<template lwc:render-mode="light">
+    <template lwc:if={showTop}>
+        <x-forwarded-slottable>
+            <x-slotee slot="top"></x-slotee>
+            <x-slotee></x-slotee>
+            <x-slotee slot="bottom"></x-slotee>
+        </x-forwarded-slottable>
+    </template>
+    <template lwc:else>
+        <x-forwarded-slottable>
+            <x-slotee slot="top"></x-slotee>
+            <x-slotee></x-slotee>
+            <x-slotee slot="bottom"></x-slotee>
+        </x-forwarded-slottable>
+    </template>
+</template>

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/slotForwarding/slotForwarding.js

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

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/slotee/slotee.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    slottee - {uuid}
+</template>

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/slotee/slotee.js

@@ -0,0 +1,18 @@
+import { LightningElement } from 'lwc';
+import { getId } from '../../util.js';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+
+    uuid = getId();
+
+    connectedCallback() {
+        window.timingBuffer.push(`${this.uuid}:connectedCallback`);
+    }
+
+    disconnectedCallback() {
+        if (window.timingBuffer) {
+            window.timingBuffer.push(`${this.uuid}:disconnectedCallback`);
+        }
+    }
+}

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/slottable/slottable.html

@@ -0,0 +1,5 @@
+<template lwc:render-mode="light">
+    <slot name="top"></slot>
+    <slot></slot>
+    <slot name="bottom"></slot>
+</template>

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/slottable/slottable.js

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

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/standardSlotting/standardSlotting.html

@@ -0,0 +1,9 @@
+<template lwc:render-mode="light">
+    <template lwc:if={show}>
+        <x-slottable>
+            <x-slotee slot="top"></x-slotee>
+            <x-slotee></x-slotee>
+            <x-slotee slot="bottom"></x-slotee>
+        </x-slottable>
+    </template>
+</template>

packages/@lwc/integration-karma/test/light-dom/lifecycle/x/standardSlotting/standardSlotting.js

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