validate tag variable in dev mode

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -276,6 +276,7 @@ export default class ElementWrapper extends Wrapper {
 		block.add_variable(previous_tag, tag);
 
 		block.chunks.init.push(b`
+			${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
 			let ${this.var} = ${tag} && ${this.child_dynamic_element_block.name}(#ctx);
 		`);
 
@@ -306,6 +307,7 @@ export default class ElementWrapper extends Wrapper {
 					${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
 				} else if (${not_equal}(${previous_tag}, ${tag})) {
 					${this.var}.d(1);
+					${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
 					${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
 					${this.var}.c();
 					${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});

src/runtime/internal/dev.ts

@@ -107,6 +107,12 @@ export function validate_slots(name, slot, keys) {
 	}
 }
 
+export function validate_dynamic_element(tag: unknown) {
+	if (tag && typeof tag !== 'string') {
+		throw new Error('<svelte:element> expects "this" attribute to be a string.');
+	}
+}
+
 type Props = Record<string, any>;
 export interface SvelteComponentDev {
 	$set(props?: Props): void;

test/runtime/samples/dynamic-element-invalid-this/_config.js

@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	props: {
+		tag: 123
+	},
+	error: '<svelte:element> expects "this" attribute to be a string.'
+};

test/runtime/samples/dynamic-element-invalid-this/main.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let tag;
+</script>
+
+<svelte:element this={tag} />