diff --git a/src/app/template_helpers.ts b/src/app/template_helpers.ts
index 82773a39..7928df60 100644
--- a/src/app/template_helpers.ts
+++ b/src/app/template_helpers.ts
@@ -32,6 +32,7 @@ function callSlot(
extra: any,
defaultContent?: (ctx: any, node: any, key: string) => BDom
): BDom {
+ key = key + "__slot_" + name;
const slots = (ctx.props && ctx.props.slots) || {};
const { __render, __ctx, __scope } = slots[name] || {};
const slotScope = Object.create(__ctx || {});
diff --git a/tests/components/__snapshots__/slots.test.ts.snap b/tests/components/__snapshots__/slots.test.ts.snap
index e4f114e9..279efed5 100644
--- a/tests/components/__snapshots__/slots.test.ts.snap
+++ b/tests/components/__snapshots__/slots.test.ts.snap
@@ -1416,6 +1416,93 @@ exports[`slots slot are properly rendered if inner props are changed 3`] = `
}"
`;
+exports[`slots slot content has different key from other content -- dynamic slot 1`] = `
+"function anonymous(bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+
+ function slot1(ctx, node, key = \\"\\") {
+ return component(\`Child\`, {parent: 'Parent'}, key + \`__1\`, node, ctx);
+ }
+
+ return function template(ctx, node, key = \\"\\") {
+ return component(\`SlotDisplay\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+ }
+}"
+`;
+
+exports[`slots slot content has different key from other content -- dynamic slot 2`] = `
+"function anonymous(bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+ let { callSlot } = helpers;
+
+ return function template(ctx, node, key = \\"\\") {
+ let b2 = component(\`Child\`, {parent: 'SlotDisplay'}, key + \`__1\`, node, ctx);
+ const slot1 = (ctx['slotName']);
+ let b3 = toggler(slot1, callSlot(ctx, node, key, slot1), true, {});
+ return multi([b2, b3]);
+ }
+}"
+`;
+
+exports[`slots slot content has different key from other content -- dynamic slot 3`] = `
+"function anonymous(bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+
+ let block1 = createBlock(\`
\`);
+
+ return function template(ctx, node, key = \\"\\") {
+ let txt1 = ctx['props'].parent;
+ return block1([txt1]);
+ }
+}"
+`;
+
+exports[`slots slot content has different key from other content -- static slot 1`] = `
+"function anonymous(bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+
+ function slot1(ctx, node, key = \\"\\") {
+ return component(\`Child\`, {parent: 'Parent'}, key + \`__1\`, node, ctx);
+ }
+
+ return function template(ctx, node, key = \\"\\") {
+ return component(\`SlotDisplay\`, {slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+ }
+}"
+`;
+
+exports[`slots slot content has different key from other content -- static slot 2`] = `
+"function anonymous(bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+ let { callSlot } = helpers;
+
+ return function template(ctx, node, key = \\"\\") {
+ let b2 = component(\`Child\`, {parent: 'SlotDisplay'}, key + \`__1\`, node, ctx);
+ let b3 = callSlot(ctx, node, key, 'default', false, {});
+ return multi([b2, b3]);
+ }
+}"
+`;
+
+exports[`slots slot content has different key from other content -- static slot 3`] = `
+"function anonymous(bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+
+ let block1 = createBlock(\`
\`);
+
+ return function template(ctx, node, key = \\"\\") {
+ let txt1 = ctx['props'].parent;
+ return block1([txt1]);
+ }
+}"
+`;
+
exports[`slots slot content is bound to caller (variation) 1`] = `
"function anonymous(bdom, helpers
) {
diff --git a/tests/components/slots.test.ts b/tests/components/slots.test.ts
index a7bac80a..dd151ad5 100644
--- a/tests/components/slots.test.ts
+++ b/tests/components/slots.test.ts
@@ -1544,4 +1544,49 @@ describe("slots", () => {
}
await mount(Parent, fixture);
});
+
+ test("slot content has different key from other content -- static slot", async () => {
+ class Child extends Component {
+ static template = xml``;
+ }
+
+ class SlotDisplay extends Component {
+ static components = { Child };
+ static template = xml``;
+ }
+
+ class Parent extends Component {
+ static components = { Child, SlotDisplay };
+ static template = xml`
+
+
+ `;
+ }
+
+ await mount(Parent, fixture);
+ expect(fixture.innerHTML).toBe("SlotDisplay
Parent
");
+ });
+
+ test("slot content has different key from other content -- dynamic slot", async () => {
+ class Child extends Component {
+ static template = xml``;
+ }
+
+ class SlotDisplay extends Component {
+ static components = { Child };
+ slotName = "default";
+ static template = xml``;
+ }
+
+ class Parent extends Component {
+ static components = { Child, SlotDisplay };
+ static template = xml`
+
+
+ `;
+ }
+
+ await mount(Parent, fixture);
+ expect(fixture.innerHTML).toBe("SlotDisplay
Parent
");
+ });
});