fix forwarded dangling slots (#5164)

jhefferman-sfdc · web-flow · commit 7556d0c20a8b · 2025-01-27T13:24:24.000-07:00
* fix: add dangling slot definition

* fix: scoped slot case, nested cases

* fix: review comments

* fix: additional test

* fix: clarified dangling slot explanation
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/expected.html
@@ -0,0 +1,16 @@
+<x-dangling-container>
+  <x-slot>
+    <x-leaf>
+      <!---->
+      <x-component slot="dangling">
+        Component content
+      </x-component>
+      <!---->
+      <!---->
+      <x-component>
+        Component content
+      </x-component>
+      <!---->
+    </x-leaf>
+  </x-slot>
+</x-dangling-container>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/index.js
@@ -0,0 +1,4 @@
+export const tagName = 'x-dangling-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/component/component.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/component/component.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    Component content
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/component/component.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/component/component.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/container/container.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/container/container.html
@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-slot>
+        <x-component slot="top"></x-component>
+        <x-component slot="bottom"></x-component>
+    </x-slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/container/container.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/container/container.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/leaf/leaf.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/leaf/leaf.html
@@ -0,0 +1,4 @@
+<template lwc:render-mode="light">
+    <slot name="leafTop" slot="dangling"></slot>
+    <slot name="leafBottom"></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/leaf/leaf.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/leaf/leaf.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/slot/slot.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/slot/slot.html
@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-leaf>
+        <slot name="top" slot="leafTop"></slot>
+        <slot name="bottom" slot="leafBottom"></slot>
+    </x-leaf>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/slot/slot.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling-component/modules/x/slot/slot.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/expected.html
@@ -2,14 +2,14 @@
   <x-slot>
     <x-leaf>
       <!---->
-      <h1 slot="bottom">
-        bottom content
+      <h1 slot="dangling">
+        top content
       </h1>
       <!---->
       <!---->
-      <h1>
-        top content
-      </h1>
+      <h2>
+        bottom content
+      </h2>
       <!---->
     </x-leaf>
   </x-slot>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.html
@@ -1,6 +1,6 @@
 <template lwc:render-mode="light">
     <x-slot>
         <h1 slot="top">top content</h1>
-        <h1 slot="bottom">bottom content</h1>
+        <h2 slot="bottom">bottom content</h2>
     </x-slot>
 </template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.html
@@ -1,4 +1,4 @@
 <template lwc:render-mode="light">
-    <slot name="top" slot="bottom"></slot>
-    <slot name="bottom"></slot>
+    <slot name="leafTop" slot="dangling"></slot>
+    <slot name="leafBottom"></slot>
 </template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.html
@@ -1,6 +1,6 @@
 <template lwc:render-mode="light">
     <x-leaf>
-        <slot name="top" slot="bottom"></slot>
-        <slot name="bottom" slot="top"></slot>
+        <slot name="top" slot="leafTop"></slot>
+        <slot name="bottom" slot="leafBottom"></slot>
     </x-leaf>
 </template>
diff --git a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
@@ -13,8 +13,6 @@ export const expectedFailures = new Set([
     'exports/component-as-default/index.js',
     'known-boolean-attributes/default-def-html-attributes/static-on-component/index.js',
     'render-dynamic-value/index.js',
-    'slot-forwarding/slots/mixed/index.js',
-    'slot-forwarding/slots/dangling/index.js',
     'wire/errors/throws-on-computed-key/index.js',
     'wire/errors/throws-when-colliding-prop-then-method/index.js',
 ]);
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/index.ts b/packages/@lwc/ssr-compiler/src/compile-template/index.ts
@@ -32,6 +32,9 @@ const bExportTemplate = esTemplate`
         let textContentBuffer = '';
         let didBufferTextContent = false;
 
+        // This will get overridden but requires initialization.
+        const slotAttributeValue = null;
+
         // Establishes a contextual relationship between two components for ContextProviders.
         // This variable will typically get overridden (shadowed) within slotted content.
         const contextfulParent = instance;
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts
@@ -19,6 +19,13 @@ const bYieldFromChildGenerator = esTemplateWithYield`
     {
         const childProps = ${/* child props */ is.objectExpression};
         const childAttrs = ${/* child attrs */ is.objectExpression};
+        /* 
+            If 'slotAttributeValue' is set, it references a slot that does not exist, and the 'slot' attribute should be set in the DOM. This behavior aligns with engine-server and engine-dom.
+            See: engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/ for example case.
+        */
+        if (slotAttributeValue) {
+            childAttrs.slot = slotAttributeValue;
+        }
         ${
             /*
                 Slotted content is inserted here.
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/lwc-component.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/lwc-component.ts
@@ -25,6 +25,13 @@ const bYieldFromDynamicComponentConstructorGenerator = esTemplateWithYield`
         }
         const childProps = ${/* child props */ is.objectExpression};
         const childAttrs = ${/* child attrs */ is.objectExpression};
+        /* 
+            If 'slotAttributeValue' is set, it references a slot that does not exist, and the 'slot' attribute should be set in the DOM. This behavior aligns with engine-server and engine-dom.
+            See: engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/ for example case.
+        */
+        if (slotAttributeValue) {
+            childAttrs.slot = slotAttributeValue;
+        }
         ${
             /*
                 Slotted content is inserted here.
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts
@@ -78,7 +78,7 @@ const bGenerateSlottedContent = esTemplateWithYield`
 const bAddSlottedContent = esTemplate`
     addSlottedContent(${/* slot name */ is.expression} ?? "", async function* generateSlottedContent(contextfulParent, ${
         /* scoped slot data variable */ isNullableOf(is.identifier)
-    }) {
+    }, slotAttributeValue) {
         // FIXME: make validation work again  
         ${/* slot content */ false}
     }, ${/* content map */ is.identifier});
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/element.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/element.ts
@@ -120,6 +120,16 @@ const bConditionallyYieldScopeTokenClass = esTemplateWithYield`
     }
 `<EsIfStatement>;
 
+/* 
+    If `slotAttributeValue` is set, it references a slot that does not exist, and the `slot` attribute should be set in the DOM. This behavior aligns with engine-server and engine-dom.
+    See: engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/ for example case.
+*/
+const bConditionallyYieldDanglingSlotName = esTemplateWithYield`
+    if (slotAttributeValue) {
+        yield \` slot="\${slotAttributeValue}"\`; 
+    }   
+`<EsBlockStatement>;
+
 const bYieldSanitizedHtml = esTemplateWithYield`
     yield sanitizeHtmlContent(${/* lwc:inner-html content */ is.expression})
 `;
@@ -263,6 +273,7 @@ export const Element: Transformer<IrElement | IrExternalComponent | IrSlot> = fu
 
     return [
         bYield(b.literal(`<${node.name}`)),
+        bConditionallyYieldDanglingSlotName(),
         // If we haven't already prefixed the scope token to an existing class, add an explicit class here
         ...(hasClassAttribute ? [] : [bConditionallyYieldScopeTokenClass()]),
         ...yieldAttrsAndProps,
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/slot.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/slot.ts
@@ -30,7 +30,13 @@ const bConditionalSlot = esTemplateWithYield`
         const scopedGenerators = scopedSlottedContent?.[slotName ?? ""];
         const mismatchedSlots = isScopedSlot ? lightGenerators : scopedGenerators;
         const generators = isScopedSlot ? scopedGenerators : lightGenerators;
-
+        /* 
+            If a slotAttributeValue is present, it should be provided for assignment to any slotted content. This behavior aligns with v1 and engine-dom.
+            See: engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/ for example.
+            Note the slot mapping does not work for scoped slots, so the slot name is not rendered in this case.
+            See: engine-server/src/__tests__/fixtures/slot-forwarding/scoped-slots for example.
+        */
+        const danglingSlotName = !isScopedSlot ? ${/* slotAttributeValue */ is.expression} || slotAttributeValue : null;
         // start bookend HTML comment for light DOM slot vfragment
         if (!isSlotted) {
             yield '<!---->';
@@ -43,7 +49,7 @@ const bConditionalSlot = esTemplateWithYield`
 
         if (generators) {
             for (let i = 0; i < generators.length; i++) {
-                yield* generators[i](contextfulParent, ${/* scoped slot data */ isNullableOf(is.expression)});
+                yield* generators[i](contextfulParent, ${/* scoped slot data */ isNullableOf(is.expression)}, danglingSlotName);
                 // Scoped slotted data is separated by bookends. Final bookends are added outside of the loop below.
                 if (isScopedSlot && i < generators.length - 1) {
                     yield '<!---->';
@@ -90,5 +96,16 @@ export const Slot: Transformer<IrSlot> = function Slot(node, ctx): EsStatement[]
     const slotChildren = irChildrenToEs(node.children, ctx);
     const isScopedSlot = b.literal(Boolean(slotBound));
     const isSlotted = b.literal(Boolean(ctx.isSlotted));
-    return [bConditionalSlot(isScopedSlot, isSlotted, slotName, slotBound, slotChildren, slotAst)];
+    const slotAttributeValue = bAttributeValue(node, 'slot');
+    return [
+        bConditionalSlot(
+            isScopedSlot,
+            isSlotted,
+            slotName,
+            slotAttributeValue,
+            slotBound,
+            slotChildren,
+            slotAst
+        ),
+    ];
 };

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template lwc:render-mode="light">`
	`2`	`+ Component content`
	`3`	`+</template>`