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

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>

test/validator/samples/svg-child-component-undeclared-namespace/input.svelte

@@ -1,8 +0,0 @@
-<script>
-	export let x;
-	export let y;
-	export let width;
-	export let height;
-</script>
-
-<rect x={x} y={y} width={width} height={height}/>

test/validator/samples/svg-child-component-undeclared-namespace/warnings.json

@@ -1,15 +0,0 @@
-[{
-	"code": "missing-namespace",
-	"message": "<rect> is an SVG element – did you forget to add <svelte:options namespace=\"svg\"/> ?",
-	"start": {
-		"line": 8,
-		"column": 0,
-		"character": 89
-	},
-	"end": {
-		"line": 8,
-		"column": 49,
-		"character": 138
-	},
-	"pos": 89
-}]