[feature] Dynamic elements implementation <svelte:element>

src/compiler/parse/state/tag.ts

@@ -189,9 +189,7 @@ export default function tag(parser: Parser) {
 		}
 
 		const definition = element.attributes.splice(index, 1)[0];
-		if (definition.value === true
-			|| definition.value.length !== 1
-			|| !['Text', 'MustacheTag', 'AttributeShorthand'].includes(definition.value[0].type)) {
+		if (definition.value === true	|| !['Text', 'MustacheTag', 'AttributeShorthand'].includes(definition.value[0].type)) {
 			parser.error(parser_errors.invalid_element_definition, definition.start);
 		}
 

test/runtime/samples/dynamic-element-template-literals/_config.js

@@ -0,0 +1,21 @@
+export default {
+	props: {
+		size: 1
+	},
+	html: '<h1>This is h1 tag</h1>',
+
+	test({ assert, component, target }) {
+		const h1 = target.firstChild;
+		component.size = 2;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<h2>This is h2 tag</h2>
+		`
+		);
+
+		const h2 = target.firstChild;
+		assert.notEqual(h1, h2);
+	}
+};

test/runtime/samples/dynamic-element-template-literals/main.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let size;
+</script>
+
+<svelte:element this="{`h${size}`}">This is h{size} tag</svelte:element>