handle foreignObject correctly, default to svg namespace for top-level svg elements - fixes sveltejs#2298

Author: Rich-Harris

src/compile/nodes/Element.ts

@@ -94,16 +94,11 @@ export default class Element extends Node {
 		this.name = info.name;
 
 		const parent_element = parent.find_nearest(/^Element/);
-		this.namespace = this.name === 'svg' ?
-			namespaces.svg :
-			parent_element ? parent_element.namespace : this.component.namespace;
-
-		if (!this.namespace && svg.test(this.name)) {
-			this.component.warn(this, {
-				code: `missing-namespace`,
-				message: `<${this.name}> is an SVG element – did you forget to add <svelte:options namespace="svg"/> ?`
-			});
-		}
+		this.namespace = this.name === 'svg' || (!parent_element && svg.test(this.name))
+			? namespaces.svg
+			: this.name === 'foreignObject'
+				? namespaces.html
+				: parent_element ? parent_element.namespace : this.component.namespace;
 
 		if (this.name === 'textarea') {
 			if (info.children.length > 0) {

test/runtime/samples/svg-foreignobject-namespace/_config.js

@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<svg>
+			<foreignObject x="0" y="0" width="100" height="100">
+				<p>some text</p>
+			</foreignObject>
+		</svg>
+	`,
+
+	test({ assert, target }) {
+		const p = target.querySelector('p');
+		assert.equal(p.namespaceURI, 'http://www.w3.org/1999/xhtml');
+	}
+};

test/runtime/samples/svg-foreignobject-namespace/main.svelte

@@ -0,0 +1,5 @@
+<svg>
+	<foreignObject x="0" y="0" width="100" height="100">
+		<p>some text</p>
+	</foreignObject>
+</svg>