Merge pull request #3403 from davebrent/gh-3321

Fix namespace for svg elements inside slots

Author: Rich-Harris

src/compiler/compile/nodes/Element.ts

@@ -84,7 +84,7 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st
 			: null);
 	}
 
-	if (element.name.toLowerCase() === 'svg') return namespaces.svg;
+	if (svg.test(element.name.toLowerCase())) return namespaces.svg;
 	if (parent_element.name.toLowerCase() === 'foreignobject') return null;
 
 	return parent_element.namespace;

test/runtime/samples/svg-slot-namespace/Widget.svelte

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

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

@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<div>
+			<svg>
+				<line x1="0" y1="0" x2="100" y2="100" />
+			</svg>
+		</div>
+	`,
+
+	test({ assert, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.namespaceURI, 'http://www.w3.org/1999/xhtml');
+
+		const line = target.querySelector('line');
+		assert.equal(line.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};

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

@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte'
+</script>
+
+<div>
+	<Widget>
+		<line x1="0" y1="0" x2="100" y2="100" />
+	</Widget>
+</div>