From 4ec9986cba11d4635155e90c87c7ac5e6503a6c1 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 1 Nov 2024 19:09:27 +0100
Subject: [PATCH] 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                     |  5 +++++
 .../phases/2-analyze/visitors/SvelteElement.js       |  5 +++--
 .../dynamic-element-svg-options-namespace/_config.js | 12 ++++++++++++
 .../main.svelte                                      |  7 +++++++
 .../rect.svelte                                      |  7 +++++++
 5 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/polite-timers-tell.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/rect.svelte

diff --git a/.changeset/polite-timers-tell.md b/.changeset/polite-timers-tell.md
new file mode 100644
index 0000000000..b98a89c95f
--- /dev/null
+++ b/.changeset/polite-timers-tell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: check options namespace for top level `svelte:element`s
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index 02717bdfd9..c0b9f95fc2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/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;
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/_config.js
new file mode 100644
index 0000000000..a18ad5dc10
--- /dev/null
+++ b/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');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/main.svelte
new file mode 100644
index 0000000000..0cc8a2a1f3
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/rect.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-options-namespace/rect.svelte
new file mode 100644
index 0000000000..e747291714
--- /dev/null
+++ b/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" />