fix(ssr): extra bookends for light dom forwarded slots @W-17363666 (#…

…5005)

* fix(ssr): extra bookends for light dom forwarded slots

* fix(ssr): extra bookens for scoped slots

* fix(ssr): extra bookends for if directive

* chore: revert unneeded change

* test(ssr): slotted-content-nested

* fix(ssr): extra bookends in nested slotted content

* Update packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.js

Co-authored-by: Nolan Lawson <[email protected]>

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

Co-authored-by: Nolan Lawson <[email protected]>

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

Co-authored-by: Nolan Lawson <[email protected]>

* test(ssr): expect failure slot-not-at-top-level/advanced/lwcIf/shadow/index.js

---------

Co-authored-by: Nolan Lawson <[email protected]>

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/expected.html

@@ -0,0 +1,22 @@
+<x-slots>
+  <template shadowrootmode="open">
+    <x-receiver>
+      <template shadowrootmode="open">
+        <slot>
+        </slot>
+      </template>
+      <x-another>
+        <template shadowrootmode="open">
+          <slot>
+          </slot>
+        </template>
+        <div>
+          hello
+        </div>
+      </x-another>
+      <div>
+        world
+      </div>
+    </x-receiver>
+  </template>
+</x-slots>

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-slots';
+export { default } from 'x/slots';
+export * from 'x/slots';

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.html

@@ -0,0 +1,12 @@
+<template>
+    <x-receiver>
+        <x-another>
+            <template lwc:if={isTrue}>
+                <div>hello</div>
+            </template>
+        </x-another>
+        <template lwc:if={isTrue}>
+            <div>world</div>
+        </template>
+    </x-receiver>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.js

@@ -0,0 +1,4 @@
+import { LightningElement } from 'lwc';
+export default class extends LightningElement {
+    isTrue = true;
+}

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

@@ -25,14 +25,10 @@ export const expectedFailures = new Set([
     'scoped-slots/expression/index.js',
     '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',
-    'slot-not-at-top-level/lwcIf/shadow/index.js',
     'superclass/render-in-superclass/no-template-in-subclass/index.js',
     'superclass/render-in-superclass/unused-default-in-subclass/index.js',
     'superclass/render-in-superclass/unused-default-in-superclass/index.js',

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

@@ -168,6 +168,10 @@ export function getSlottedContent(
     node: IrLwcComponent | IrComponent,
     cxt: TransformerContext
 ): EsStatement[] {
+    const { isSlotted } = cxt;
+
+    cxt.isSlotted = true;
+
     // Anything inside the slotted content is a normal slotted content except for `<template lwc:slot-data>` which is a scoped slot.
     const slottableChildren = node.children.filter((child) => child.type !== 'ScopedSlotFragment');
     const scopedSlottableChildren = node.children.filter(
@@ -199,6 +203,8 @@ export function getSlottedContent(
         lightSlotContent.length > 0 || scopedSlotContent.length > 0
     );
 
+    cxt.isSlotted = isSlotted;
+
     return bGenerateSlottedContent(
         hasShadowSlottedContent,
         shadowSlotContent,

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

@@ -63,7 +63,7 @@ function bIfStatement(
 
     return b.ifStatement(
         expressionIrToEs(condition, cxt),
-        bBlockStatement(children, cxt, true),
+        bBlockStatement(children, cxt, !cxt.isSlotted),
         elseBlock
     );
 }

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

@@ -24,12 +24,15 @@ import type { Transformer } from '../types';
 const bConditionalSlot = esTemplateWithYield`
     if (isLightDom) {
         const isScopedSlot = ${/* isScopedSlot */ is.literal};
+        const isSlotted = ${/* isSlotted */ is.literal};
         // start bookend HTML comment for light DOM slot vfragment
-        yield '<!---->';
-
-        // scoped slot factory has its own vfragment hence its own bookend
-        if (isScopedSlot) {
+        if (!isSlotted) {
             yield '<!---->';
+
+            // scoped slot factory has its own vfragment hence its own bookend
+            if (isScopedSlot) {
+                yield '<!---->';
+            }
         }
 
         const generators = lightSlottedContent?.[${/* slotName */ is.expression} ?? ""];
@@ -45,14 +48,16 @@ const bConditionalSlot = esTemplateWithYield`
             // TODO: default/fallback slot content
             ${/* slot fallback content */ is.statement}
         }
-        
-        // scoped slot factory has its own vfragment hence its own bookend
-        if (isScopedSlot) {
-            yield '<!---->';
-        }
 
         // end bookend HTML comment for light DOM slot vfragment
-        yield '<!---->';
+        if (!isSlotted) {
+            yield '<!---->';
+
+            // scoped slot factory has its own vfragment hence its own bookend
+            if (isScopedSlot) {
+                yield '<!---->';
+            }
+        }
     } else {
         ${/* slot element AST */ is.statement}
     }
@@ -68,5 +73,6 @@ export const Slot: Transformer<IrSlot> = function Slot(node, ctx): EsStatement[]
     const slotAst = Element(node, ctx);
     const slotChildren = irChildrenToEs(node.children, ctx);
     const isScopedSlot = b.literal(Boolean(slotBound));
-    return [bConditionalSlot(isScopedSlot, slotName, slotBound, slotChildren, slotAst)];
+    const isSlotted = b.literal(Boolean(ctx.isSlotted));
+    return [bConditionalSlot(isScopedSlot, isSlotted, slotName, slotBound, slotChildren, slotAst)];
 };

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

@@ -20,6 +20,7 @@ export interface TransformerContext {
     templateOptions: TemplateOpts;
     prevSibling?: IrNode;
     nextSibling?: IrNode;
+    isSlotted?: boolean;
     import: (
         imports: string | string[] | Record<string, string | undefined>,
         source?: string