From ca63111498f4ceeba9d09d0571703b74abf3ebf9 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 31 Oct 2021 20:58:58 +0900
Subject: [PATCH] fix named slot bug

---
 src/compiler/compile/nodes/InlineComponent.ts |  8 ++---
 .../samples/dynamic-element-slot/Foo.svelte   |  7 +++++
 .../samples/dynamic-element-slot/_config.js   | 29 +++++++++++++++++++
 .../samples/dynamic-element-slot/main.svelte  | 10 +++++++
 4 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/dynamic-element-slot/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-element-slot/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-slot/main.svelte

diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
index a7bc986e9b..3d9a8ab0db 100644
--- a/src/compiler/compile/nodes/InlineComponent.ts
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -106,7 +106,7 @@ export default class InlineComponent extends Node {
 			if (child.type === 'SlotTemplate') {
 				children.push(child);
 				info.children.splice(i, 1);
-			} else if ((child.type === 'Element' || child.type === 'InlineComponent' || child.type === 'Slot') && child.attributes.find(attribute => attribute.name === 'slot')) {
+			} else if ((child.type === 'Element' || child.type === 'DynamicElement' || child.type === 'InlineComponent' || child.type === 'Slot') && child.attributes.find(attribute => attribute.name === 'slot')) {
 				const slot_template = {
 					start: child.start,
 					end: child.end,
@@ -126,17 +126,17 @@ export default class InlineComponent extends Node {
 						slot_template.attributes.push(attribute);
 					}
 				}
-		
+
 				children.push(slot_template);
 				info.children.splice(i, 1);
 			}
 		}
 
 		if (info.children.some(node => not_whitespace_text(node))) {
-			children.push({ 
+			children.push({
 				start: info.start,
 				end: info.end,
-				type: 'SlotTemplate', 
+				type: 'SlotTemplate',
 				name: 'svelte:fragment',
 				attributes: [],
 				children: info.children
diff --git a/test/runtime/samples/dynamic-element-slot/Foo.svelte b/test/runtime/samples/dynamic-element-slot/Foo.svelte
new file mode 100644
index 0000000000..51dda4b7e3
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-slot/Foo.svelte
@@ -0,0 +1,7 @@
+<h1>Foo</h1>
+<div id="default">
+	<slot></slot>
+</div>
+<div id="other">
+	<slot name='other'></slot>
+</div>
diff --git a/test/runtime/samples/dynamic-element-slot/_config.js b/test/runtime/samples/dynamic-element-slot/_config.js
new file mode 100644
index 0000000000..aa9da522a3
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-slot/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<h1>Foo</h1>
+		<div id="default">
+		  <h1>This is default slot</h1>
+		</div>
+		<div id="other">
+		  <h1 slot='other'>This is other slot</h1>
+		</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.tag = 'h2';
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Foo</h1>
+			<div id="default">
+				<h2>This is default slot</h2>
+			</div>
+			<div id="other">
+				<h2 slot='other'>This is other slot</h2>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-slot/main.svelte b/test/runtime/samples/dynamic-element-slot/main.svelte
new file mode 100644
index 0000000000..4b1cd81969
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-slot/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let tag = "h1";
+</script>
+
+<Foo>
+	<svelte:element this={tag}>This is default slot</svelte:element>
+	<svelte:element this={tag} slot='other'>This is other slot</svelte:element>
+</Foo>
+