fix: add check for is attribute (#15086)

Fixes #15085

Add a check for is attribute in is_custom_element_node function.

Author: edoardocavazza

.changeset/two-doors-exercise.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: add check for `is` attribute to correctly detect custom elements

packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -227,7 +227,7 @@ export function RegularElement(node, context) {
 			node_id,
 			attributes_id,
 			(node.metadata.svg || node.metadata.mathml || is_custom_element_node(node)) && b.true,
-			node.name.includes('-') && b.true,
+			is_custom_element_node(node) && b.true,
 			context.state
 		);
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js

@@ -4,6 +4,7 @@
 import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
+import { is_custom_element_node } from '../../../../nodes.js';
 import { build_template_chunk } from './utils.js';
 
 /**
@@ -128,7 +129,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 function is_static_element(node, state) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
-	if (node.name.includes('-')) return false; // we're setting all attributes on custom elements through properties
+	if (is_custom_element_node(node)) return false; // we're setting all attributes on custom elements through properties
 
 	for (const attribute of node.attributes) {
 		if (attribute.type !== 'Attribute') {

packages/svelte/src/compiler/phases/nodes.js

@@ -23,10 +23,14 @@ export function is_element_node(node) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
- * @returns {node is AST.RegularElement}
+ * @returns {boolean}
  */
 export function is_custom_element_node(node) {
-	return node.type === 'RegularElement' && node.name.includes('-');
+	return (
+		node.type === 'RegularElement' &&
+		(node.name.includes('-') ||
+			node.attributes.some((attr) => attr.type === 'Attribute' && attr.name === 'is'))
+	);
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js

@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'server'],
+	async test({ assert, target }) {
+		const my_element = /** @type HTMLElement & { object: { test: true }; } */ (
+			target.querySelector('my-element')
+		);
+		const my_link = /** @type HTMLAnchorElement & { object: { test: true }; } */ (
+			target.querySelector('a')
+		);
+		assert.equal(my_element.getAttribute('string'), 'test');
+		assert.equal(my_element.hasAttribute('object'), false);
+		assert.deepEqual(my_element.object, { test: true });
+		assert.equal(my_link.getAttribute('string'), 'test');
+		assert.equal(my_link.hasAttribute('object'), false);
+		assert.deepEqual(my_link.object, { test: true });
+	}
+});

packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte

@@ -0,0 +1,2 @@
+<my-element string="test" object={{ test: true }}></my-element>
+<a is="my-link" string="test" object={{ test: true }}></a>