refactor: partially fix slot forwarding in SSR (#4999)

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/expected.html

@@ -0,0 +1,16 @@
+<x-dangling-container>
+  <x-slot>
+    <x-leaf>
+      <!---->
+      <h1 slot="bottom">
+        bottom content
+      </h1>
+      <!---->
+      <!---->
+      <h1>
+        top content
+      </h1>
+      <!---->
+    </x-leaf>
+  </x-slot>
+</x-dangling-container>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/index.js

@@ -0,0 +1,4 @@
+export const tagName = 'x-dangling-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.html

@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-slot>
+        <h1 slot="top">top content</h1>
+        <h1 slot="bottom">bottom content</h1>
+    </x-slot>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/expected.html

@@ -0,0 +1,16 @@
+<x-light-container>
+  <x-slot>
+    <x-leaf>
+      <!---->
+      <h1>
+        bottom content
+      </h1>
+      <!---->
+      <!---->
+      <h1>
+        top content
+      </h1>
+      <!---->
+    </x-leaf>
+  </x-slot>
+</x-light-container>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/index.js

@@ -0,0 +1,4 @@
+export const tagName = 'x-light-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/container/container.html

@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-slot>
+        <h1 slot="top">top content</h1>
+        <h1 slot="bottom">bottom content</h1>
+    </x-slot>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/container/container.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/leaf/leaf.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/leaf/leaf.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/slot/slot.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/slot/slot.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/expected.html

@@ -0,0 +1,40 @@
+<x-mixed-container>
+  <template shadowrootmode="open">
+    <x-light-parent>
+      <x-shadow-leaf>
+        <template shadowrootmode="open">
+          <slot name="top">
+          </slot>
+          <slot name="bottom">
+          </slot>
+        </template>
+        <div slot="bottom">
+          top of light parent
+        </div>
+        <div slot="top">
+          bottom of light parent
+        </div>
+      </x-shadow-leaf>
+    </x-light-parent>
+    <x-shadow-parent>
+      <template shadowrootmode="open">
+        <x-light-leaf>
+          <!---->
+          <slot name="bottom">
+          </slot>
+          <!---->
+          <!---->
+          <slot name="top">
+          </slot>
+          <!---->
+        </x-light-leaf>
+      </template>
+      <div slot="top">
+        top of shadow parent
+      </div>
+      <div slot="bottom">
+        bottom of shadow parent
+      </div>
+    </x-shadow-parent>
+  </template>
+</x-mixed-container>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/index.js

@@ -0,0 +1,4 @@
+export const tagName = 'x-mixed-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/container/container.html

@@ -0,0 +1,11 @@
+<template>
+    <x-light-parent>
+        <div slot="top">top of light parent</div>
+        <div slot="bottom">bottom of light parent</div>
+    </x-light-parent>
+
+    <x-shadow-parent>
+        <div slot="top">top of shadow parent</div>
+        <div slot="bottom">bottom of shadow parent</div>
+    </x-shadow-parent>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/container/container.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightLeaf/lightLeaf.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightLeaf/lightLeaf.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightParent/lightParent.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightParent/lightParent.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowLeaf/shadowLeaf.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowLeaf/shadowLeaf.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowParent/shadowParent.html

@@ -0,0 +1,6 @@
+<template>
+    <x-light-leaf>
+        <slot name="top" slot="bottom"></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-light-leaf>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowParent/shadowParent.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/expected.html

@@ -0,0 +1,26 @@
+<x-shadow-container>
+  <template shadowrootmode="open">
+    <x-slot>
+      <template shadowrootmode="open">
+        <x-leaf>
+          <template shadowrootmode="open">
+            <slot name="top">
+            </slot>
+            <slot name="bottom">
+            </slot>
+          </template>
+          <slot name="top" slot="bottom">
+          </slot>
+          <slot name="bottom" slot="top">
+          </slot>
+        </x-leaf>
+      </template>
+      <h1 slot="top">
+        top content
+      </h1>
+      <h1 slot="bottom">
+        bottom content
+      </h1>
+    </x-slot>
+  </template>
+</x-shadow-container>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/index.js

@@ -0,0 +1,4 @@
+export const tagName = 'x-shadow-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/container/container.html

@@ -0,0 +1,6 @@
+<template>
+    <x-slot>
+        <h1 slot="top">top content</h1>
+        <h1 slot="bottom">bottom content</h1>
+    </x-slot>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/container/container.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/leaf/leaf.html

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/leaf/leaf.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/slot/slot.html

@@ -0,0 +1,6 @@
+<template>
+    <x-leaf>
+        <slot name="top" slot="bottom"></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-leaf>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/slot/slot.js

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

packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts

@@ -26,6 +26,9 @@ export const expectedFailures = new Set([
     'scoped-slots/mixed-with-light-dom-slots-inside/index.js',
     'scoped-slots/mixed-with-light-dom-slots-outside/index.js',
     'slot-forwarding/scoped-slots/index.js',
+    'slot-forwarding/slots/mixed/index.js',
+    'slot-forwarding/slots/dangling/index.js',
+    'slot-forwarding/slots/light/index.js',
     'slot-not-at-top-level/advanced/lwcIf/light/index.js',
     'slot-not-at-top-level/advanced/lwcIf/shadow/index.js',
     'slot-not-at-top-level/lwcIf/light/index.js',

packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts

@@ -23,7 +23,7 @@ const bYieldFromChildGenerator = esTemplateWithYield`
             /*
                 Slotted content is inserted here.
                 Note that the slotted content will be stored in variables named 
-                `shadowSlottedContent`/`lightSlottedContent` which are used below 
+                `shadowSlottedContent`/`lightSlottedContentMap` which are used below 
                 when the child's generateMarkup function is invoked.
             */
             is.statement
@@ -37,7 +37,7 @@ const bYieldFromChildGenerator = esTemplateWithYield`
             childProps, 
             childAttrs, 
             shadowSlottedContent,
-            lightSlottedContent,
+            lightSlottedContentMap,
             instance,
             scopeToken,
         );

packages/@lwc/ssr-compiler/src/compile-template/transformers/component/lwc-component.ts

@@ -29,7 +29,7 @@ const bYieldFromDynamicComponentConstructorGenerator = esTemplateWithYield`
             /*
                 Slotted content is inserted here.
                 Note that the slotted content will be stored in variables named 
-                `shadowSlottedContent`/`lightSlottedContent` which are used below 
+                `shadowSlottedContent`/`lightSlottedContentMap` which are used below 
                 when the child's generateMarkup function is invoked.
             */
             is.statement
@@ -42,7 +42,7 @@ const bYieldFromDynamicComponentConstructorGenerator = esTemplateWithYield`
             childProps,
             childAttrs,
             shadowSlottedContent,
-            lightSlottedContent,
+            lightSlottedContentMap,
             scopeToken
         );
     }

packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts

@@ -29,6 +29,7 @@ import type {
     LwcComponent as IrLwcComponent,
     ScopedSlotFragment as IrScopedSlotFragment,
     Text as IrText,
+    Slot as IrSlot,
 } from '@lwc/template-compiler';
 import type { TransformerContext } from '../../types';
 
@@ -40,17 +41,17 @@ const bGenerateSlottedContent = esTemplateWithYield`
             // Avoid creating the object unnecessarily
             : null;
 
-        const lightSlottedContent = ${/* hasLightSlottedContent */ is.literal} 
+        const lightSlottedContentMap = ${/* hasLightSlottedContent */ is.literal} 
             ? Object.create(null)
             // Avoid creating the object unnecessarily
             : null;
         
         function addLightContent(name, fn) {
-            let contentList = lightSlottedContent[name];
+            let contentList = lightSlottedContentMap[name];
             if (contentList) {
                 contentList.push(fn);
             } else {
-                lightSlottedContent[name] = [fn];
+                lightSlottedContentMap[name] = [fn];
             }
         }
 
@@ -97,7 +98,7 @@ const bAddLightContent = esTemplate`
 // relevant to slots (as mentioned above).
 function getLightSlottedContent(rootNodes: IrChildNode[], cxt: TransformerContext) {
     type SlottableAncestorIrType = IrIf | IrIfBlock | IrElseifBlock | IrElseBlock;
-    type SlottableLeafIrType = IrElement | IrText | IrComponent | IrExternalComponent;
+    type SlottableLeafIrType = IrElement | IrText | IrComponent | IrExternalComponent | IrSlot;
 
     const results: EsExpressionStatement[] = [];
 
@@ -140,6 +141,7 @@ function getLightSlottedContent(rootNodes: IrChildNode[], cxt: TransformerContex
                     break;
                 }
                 // SlottableLeafIrType
+                case 'Slot':
                 case 'Element':
                 case 'Text':
                 case 'Component':