fix: check options namespace for top level `svelte:element`s (#14101)

We were checking it for nested elements, but not root elements

fixes #13875

.changeset/polite-timers-tell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: check options namespace for top level `svelte:element`s

packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js

@@ -35,9 +35,10 @@ export function SvelteElement(node, context) {
 				ancestor.type === 'Component' ||
 				ancestor.type === 'SvelteComponent' ||
 				ancestor.type === 'SvelteFragment' ||
-				ancestor.type === 'SnippetBlock'
+				ancestor.type === 'SnippetBlock' ||
+				i === 0
 			) {
-				// Inside a slot or a snippet -> this resets the namespace, so assume the component namespace
+				// Root element, or inside a slot or a snippet -> this resets the namespace, so assume the component namespace
 				node.metadata.svg = context.state.options.namespace === 'svg';
 				node.metadata.mathml = context.state.options.namespace === 'mathml';
 				break;

packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<svg><rect fill="black" width="10" height="90"></rect></svg>',
+
+	test({ assert, target }) {
+		const svg = target.querySelector('svg');
+		const rect = target.querySelector('rect');
+		assert.equal(svg?.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(rect?.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+});

packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Rect from './rect.svelte';
+</script>
+
+<svg>
+	<Rect />
+</svg>

packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/rect.svelte

@@ -0,0 +1,7 @@
+<svelte:options namespace="svg" />
+
+<script>
+	const tag = 'rect';
+</script>
+
+<svelte:element this={tag} fill="black" width="10" height="90" />