fix: handle non-string values in svelte:element this attribute (#17499)

* fix: handle non-string values in svelte:element this attribute

* chore: add changeset

* fix(review): throw error in DEV for invalid svelte:element tag, ignore in PROD

* chore: remove unused expected.html from test

* fix(review): refine validate.js logic

* fix(review): use else if (string) logic in server/index.js

* fix(review): swap validation order in compiler, revert runtime changes

* test: move reproduction to runtime-legacy per review

* Apply suggestion from @7nik

---------

Co-authored-by: tensorworker <tensorworker@proton.me>
Co-authored-by: 7nik <kfiiranet@gmail.com>

.changeset/clever-cats-dance.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: handle non-string values in `svelte:element` `this` attribute

packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js

@@ -117,10 +117,10 @@ export function SvelteElement(node, context) {
 	);
 
 	if (dev) {
+		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
 		if (node.fragment.nodes.length > 0) {
 			statements.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
 		}
-		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
 	}
 
 	const location = dev && locator(node.start);

packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js

@@ -29,10 +29,10 @@ export function SvelteElement(node, context) {
 			tag = b.id(tag_id);
 		}
 
+		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 		if (node.fragment.nodes.length > 0) {
 			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
 		}
-		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 	}
 
 	const state = {

packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js

@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'server'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	get props() {
+		return { tag: true };
+	},
+
+	error:
+		'svelte_element_invalid_this_value\n' +
+		'The `this` prop on `<svelte:element>` must be a string, if defined'
+});

packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte

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