fix: never set custom element props as attributes (#12622)

dummdidumm · Rich-Harris · web-flow · commit 32af9434bc58 · 2024-07-26T16:05:49.000-04:00
* fix: never set custom element props as attributes

* changeset

---------

Co-authored-by: Rich Harris &lt;rich.harris@vercel.com&gt;
diff --git a/.changeset/fifty-toys-invite.md b/.changeset/fifty-toys-invite.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: never set custom element props as attributes inside templates
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -2152,6 +2152,7 @@ export const template_visitors = {
 				}
 
 				if (
+					!is_custom_element &&
 					attribute.name !== 'autofocus' &&
 					(attribute.value === true || is_text_attribute(attribute))
 				) {
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js
@@ -1,8 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
-
+	mode: ['client'],
 	html: `
 		<my-custom-inheritance-element>Hello World!</my-custom-inheritance-element>
 	`

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte": patch
 +---
++
 +fix: never set custom element props as attributes inside templates
Original file line number	Diff line number	Diff line change
`@@ -2152,6 +2152,7 @@ export const template_visitors = {`
`2152`	`2152`	`}`
`2153`	`2153`
`2154`	`2154`	`if (`
	`2155`	`+ !is_custom_element &&`
`2155`	`2156`	`attribute.name !== 'autofocus' &&`
`2156`	`2157`	`(attribute.value === true \|\| is_text_attribute(attribute))`
`2157`	`2158`	`) {`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,7 @@`
`1`	`1`	`import { test } from '../../test';`
`2`	`2`
`3`	`3`	`export default test({`
`4`		`- skip: true, // TODO: needs fixing`
`5`		`-`
	`4`	`+ mode: ['client'],`
`6`	`5`	html: `
`7`	`6`	`<my-custom-inheritance-element>Hello World!</my-custom-inheritance-element>`
`8`	`7`	`