[feat] skip custom element check if <svelte:element> uses under svg (#…

…7869) * add test * skip custom element check if svelte element uses under svg
sveltejs · Sep 15, 2022 · 433460e · 433460e
1 parent 56bcec5
commit 433460e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -806,12 +806,14 @@ export default class ElementWrapper extends Wrapper {
 		if (this.node.is_dynamic_element) {
 			// call attribute bindings for custom element if tag is custom element
 			const tag = this.node.tag_expr.manipulate(block);
-			const attr_update = b`
-				if (/-/.test(${tag})) {
-					@set_custom_element_data_map(${this.var}, ${data});
-				} else {
-					${fn}(${this.var}, ${data});
-				}`;
+			const attr_update = this.node.namespace === namespaces.svg
+				? b`${fn}(${this.var}, ${data});`
+				: b`
+					if (/-/.test(${tag})) {
+						@set_custom_element_data_map(${this.var}, ${data});
+					} else {
+						${fn}(${this.var}, ${data});
+					}`;
 			block.chunks.hydrate.push(attr_update);
 			block.chunks.update.push(b`
 				${data} = @get_spread_update(${levels}, [${updates}]);

diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js
@@ -48,8 +48,10 @@ function create_dynamic_element(ctx) {
 			append(svelte_element1, svelte_element0);
 		},
 		p(ctx, dirty) {
-			set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
-			set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
+			svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]);
+			set_svg_attributes(svelte_element0, svelte_element0_data);
+			svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]);
+			set_svg_attributes(svelte_element1, svelte_element1_data);
 		},
 		d(detaching) {
 			if (detaching) detach(svelte_element1);
@@ -108,4 +110,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
+export default Component;
diff --git a/test/runtime/samples/dynamic-element-svg/_config.js b/test/runtime/samples/dynamic-element-svg/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: '<svg xmlns="http://www.w3.org/2000/svg"><path xmlns="http://www.w3.org/2000/svg"></path></svg>',
+
+	test({ assert, target }) {
+		const svg = target.querySelector('svg');
+		const rect = target.querySelector('path');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(rect.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-svg/main.svelte b/test/runtime/samples/dynamic-element-svg/main.svelte
@@ -0,0 +1,3 @@
+<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
+    <svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
+</svelte:element>