fix: dynamic namespace fixes and enhancements (#11219)

* fix: fall back to component namespace when not statically determinable

In #10006 we added more elaborate mechanisms to determine which namespace a given element is in. For `<svelte:element>` we added a "can't know at compile time" case and introduced a limited heuristic into the runtime.
This doesn't work for a few reasons:
- we're checking the parent's namespace to determine the current namespace, but the element itself could be the one that _changes_ the namespace
- as mentioned in the previous comment already, on the first render we can't do any parent analysis
- it does not take into account the static component namespace

The last point is the crucial one: In Svelte 4, we're falling back to the component namespace if we can't know statically - e.g. if someone added `<svelte:options namespace="svg">` then `<svelte:element>` should fall back to that namespace instead.
We were not doing that up until now, which introduced a regression. Fixing this also means getting rid of the (flawed) "can't know statically" heuristic.

Fixes #10858, though for a complete solution we likely need some way to tell `<svelte:element>` the namespace at runtime through a special attribute. Maybe we can use `xmlns` for that like we do in the static case

* support dynamic svelte:element namespace through xmlns attribute

* fix

Author: dummdidumm

.changeset/hip-pumpkins-boil.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: fall back to component namespace when not statically determinable, add way to tell `<svelte:element>` the namespace at runtime

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -1341,7 +1341,8 @@ const common_visitors = {
 				ancestor.type === 'SvelteFragment' ||
 				ancestor.type === 'SnippetBlock'
 			) {
-				// Inside a slot or a snippet -> this resets the namespace, so we can't determine it
+				// Inside a slot or a snippet -> this resets the namespace, so assume the component namespace
+				node.metadata.svg = context.state.options.namespace === 'svg';
 				return;
 			}
 			if (ancestor.type === 'SvelteElement' || ancestor.type === 'RegularElement') {

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

@@ -7,7 +7,7 @@ import { global_visitors } from './visitors/global.js';
 import { javascript_visitors } from './visitors/javascript.js';
 import { javascript_visitors_runes } from './visitors/javascript-runes.js';
 import { javascript_visitors_legacy } from './visitors/javascript-legacy.js';
-import { is_state_source, serialize_get_binding } from './utils.js';
+import { serialize_get_binding } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
 
 /**

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

@@ -2008,6 +2008,9 @@ export const template_visitors = {
 		/** @type {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute>} */
 		const attributes = [];
 
+		/** @type {import('#compiler').Attribute['value'] | undefined} */
+		let dynamic_namespace = undefined;
+
 		/** @type {import('#compiler').ClassDirective[]} */
 		const class_directives = [];
 
@@ -2036,6 +2039,9 @@ export const template_visitors = {
 
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'Attribute') {
+				if (attribute.name === 'xmlns' && !is_text_attribute(attribute)) {
+					dynamic_namespace = attribute.value;
+				}
 				attributes.push(attribute);
 			} else if (attribute.type === 'SpreadAttribute') {
 				attributes.push(attribute);
@@ -2090,23 +2096,16 @@ export const template_visitors = {
 				}
 			})
 		);
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.element',
-					context.state.node,
-					get_tag,
-					node.metadata.svg === true
-						? b.true
-						: node.metadata.svg === false
-							? b.false
-							: b.literal(null),
-					inner.length === 0
-						? /** @type {any} */ (undefined)
-						: b.arrow([element_id, b.id('$$anchor')], b.block(inner))
-				)
-			)
-		);
+
+		const args = [context.state.node, get_tag, node.metadata.svg ? b.true : b.false];
+		if (inner.length > 0) {
+			args.push(b.arrow([element_id, b.id('$$anchor')], b.block(inner)));
+		}
+		if (dynamic_namespace) {
+			if (inner.length === 0) args.push(b.id('undefined'));
+			args.push(b.thunk(serialize_attribute_value(dynamic_namespace, context)[1]));
+		}
+		context.state.init.push(b.stmt(b.call('$.element', ...args)));
 	},
 	EachBlock(node, context) {
 		const each_node_meta = node.metadata;

packages/svelte/src/compiler/types/template.d.ts

@@ -316,10 +316,10 @@ export interface SvelteElement extends BaseElement {
 	tag: Expression;
 	metadata: {
 		/**
-		 * `true`/`false` if this is definitely (not) an svg element.
-		 * `null` means we can't know statically.
+		 * `true` if this is an svg element. The boolean may not be accurate because
+		 * the tag is dynamic, but we do our best to infer it from the template.
 		 */
-		svg: boolean | null;
+		svg: boolean;
 		scoped: boolean;
 	};
 }

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -39,11 +39,12 @@ function swap_block_dom(effect, from, to) {
 /**
  * @param {Comment} anchor
  * @param {() => string} get_tag
- * @param {boolean | null} is_svg `null` == not statically known
- * @param {undefined | ((element: Element, anchor: Node) => void)} render_fn
+ * @param {boolean} is_svg
+ * @param {undefined | ((element: Element, anchor: Node) => void)} render_fn,
+ * @param {undefined | (() => string)} get_namespace
  * @returns {void}
  */
-export function element(anchor, get_tag, is_svg, render_fn) {
+export function element(anchor, get_tag, is_svg, render_fn, get_namespace) {
 	const parent_effect = /** @type {import('#client').Effect} */ (current_effect);
 
 	render_effect(() => {
@@ -68,22 +69,18 @@ export function element(anchor, get_tag, is_svg, render_fn) {
 
 		block(() => {
 			const next_tag = get_tag() || null;
+			const ns = get_namespace
+				? get_namespace()
+				: is_svg || next_tag === 'svg'
+					? namespace_svg
+					: null;
+			// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
 			if (next_tag === tag) return;
 
 			// See explanation of `each_item_block` above
 			var previous_each_item = current_each_item;
 			set_current_each_item(each_item_block);
 
-			// We try our best infering the namespace in case it's not possible to determine statically,
-			// but on the first render on the client (without hydration) the parent will be undefined,
-			// since the anchor is not attached to its parent / the dom yet.
-			const ns =
-				is_svg || next_tag === 'svg'
-					? namespace_svg
-					: is_svg === false || anchor.parentElement?.tagName === 'foreignObject'
-						? null
-						: anchor.parentElement?.namespaceURI ?? null;
-
 			if (effect) {
 				if (next_tag === null) {
 					// start outro

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

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const path = target.querySelector('path');
+
+		assert.equal(path?.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+});

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

@@ -0,0 +1,11 @@
+<svelte:options namespace="svg" />
+
+<script>
+	import Svg from "./svg.svelte";
+
+	let tag = "path";
+</script>
+
+<Svg>
+	<svelte:element this="{tag}" d="M21 12a9 9 0 1 1-6.219-8.56"/>
+</Svg>

packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-inherit-namespace-2/svg.svelte

@@ -0,0 +1 @@
+<svg><slot></slot></svg>

packages/svelte/tests/runtime-runes/samples/dynamic-element-dynamic-namespace/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.equal(target.querySelector('path')?.namespaceURI, 'http://www.w3.org/2000/svg');
+
+		await target.querySelector('button')?.click();
+		assert.equal(target.querySelector('div')?.namespaceURI, 'http://www.w3.org/1999/xhtml');
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-element-dynamic-namespace/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	let tag = $state('path');
+	let xmlns = $state('http://www.w3.org/2000/svg');
+</script>
+
+<button onclick={() => {
+	tag = 'div';
+	xmlns = null;
+}}>change</button>
+
+<!-- wrapper necessary or else jsdom says this is always an xhtml namespace -->
+<svg>
+	<svelte:element this={tag} xmlns={xmlns} />
+</svg>

packages/svelte/types/index.d.ts

@@ -1539,10 +1539,10 @@ declare module 'svelte/compiler' {
 		tag: Expression;
 		metadata: {
 			/**
-			 * `true`/`false` if this is definitely (not) an svg element.
-			 * `null` means we can't know statically.
+			 * `true` if this is an svg element. The boolean may not be accurate because
+			 * the tag is dynamic, but we do our best to infer it from the template.
 			 */
-			svg: boolean | null;
+			svg: boolean;
 			scoped: boolean;
 		};
 	}