more

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

@@ -208,7 +208,15 @@ export function RegularElement(node, context) {
 	if (has_spread) {
 		const attributes_id = b.id(context.state.scope.generate('attributes'));
 
-		build_element_spread_attributes(attributes, context, node, node_id, attributes_id);
+		build_element_spread_attributes(
+			attributes,
+			context,
+			node,
+			node_id,
+			attributes_id,
+			(node.metadata.svg || node.metadata.mathml || is_custom_element_node(node)) && b.true,
+			node.name.includes('-') && b.true
+		);
 
 		// If value binding exists, that one takes care of calling $.init_select
 		if (node.name === 'select' && !bindings.has('value')) {
@@ -478,8 +486,18 @@ function setup_select_synchronization(value_binding, context) {
  * @param {AST.RegularElement} element
  * @param {Identifier} element_id
  * @param {Identifier} attributes_id
+ * @param {false | Expression} preserve_attribute_case
+ * @param {false | Expression} is_custom_element
  */
-function build_element_spread_attributes(attributes, context, element, element_id, attributes_id) {
+function build_element_spread_attributes(
+	attributes,
+	context,
+	element,
+	element_id,
+	attributes_id,
+	preserve_attribute_case,
+	is_custom_element
+) {
 	let needs_isolation = false;
 
 	/** @type {ObjectExpression['properties']} */
@@ -509,9 +527,6 @@ function build_element_spread_attributes(attributes, context, element, element_i
 			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
 	}
 
-	const preserve_attribute_case =
-		element.metadata.svg || element.metadata.mathml || is_custom_element_node(element);
-
 	const update = b.stmt(
 		b.assignment(
 			'=',
@@ -522,9 +537,9 @@ function build_element_spread_attributes(attributes, context, element, element_i
 				attributes_id,
 				b.object(values),
 				context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
-				preserve_attribute_case && b.true,
+				preserve_attribute_case,
-				is_ignored(element, 'hydration_attribute_changed') && b.true,
+				is_custom_element,
-				element.name.includes('-') && b.true
+				is_ignored(element, 'hydration_attribute_changed') && b.true
 			)
 		)
 	);

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

@@ -99,7 +99,9 @@ export function SvelteElement(node, context) {
 			attributes,
 			inner_context,
 			element_id,
-			attributes_id
+			attributes_id,
+			b.binary('!==', b.member(element_id, 'namespaceURI'), b.id('$.NAMESPACE_SVG')),
+			b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-'))
 		);
 	}
 
@@ -159,9 +161,19 @@ export function SvelteElement(node, context) {
  * @param {ComponentContext} context
  * @param {Identifier} element_id
  * @param {Identifier} attributes_id
+ * @param {false | Expression} preserve_attribute_case
+ * @param {false | Expression} is_custom_element
  * @returns {boolean}
  */
-function build_dynamic_element_attributes(element, attributes, context, element_id, attributes_id) {
+function build_dynamic_element_attributes(
+	element,
+	attributes,
+	context,
+	element_id,
+	attributes_id,
+	preserve_attribute_case,
+	is_custom_element
+) {
 	let needs_isolation = false;
 	let is_reactive = false;
 
@@ -202,9 +214,9 @@ function build_dynamic_element_attributes(element, attributes, context, element_
 		is_reactive ? attributes_id : b.literal(null),
 		b.object(values),
 		context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
-		b.binary('!==', b.member(element_id, 'namespaceURI'), b.id('$.NAMESPACE_SVG')),
+		preserve_attribute_case,
-		is_ignored(element, 'hydration_attribute_changed') && b.true,
+		is_custom_element,
-		b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-'))
+		is_ignored(element, 'hydration_attribute_changed') && b.true
 	);
 
 	if (is_reactive) {

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -149,9 +149,9 @@ export function set_custom_element_data(node, prop, value) {
  * @param {Record<string, any> | undefined} prev
  * @param {Record<string, any>} next New attributes - this function mutates this object
  * @param {string} [css_hash]
- * @param {boolean} preserve_attribute_case
+ * @param {boolean} [preserve_attribute_case]
- * @param {boolean} [skip_warning]
  * @param {boolean} [is_custom_element]
+ * @param {boolean} [skip_warning]
  * @returns {Record<string, any>}
  */
 export function set_attributes(
@@ -160,8 +160,8 @@ export function set_attributes(
 	next,
 	css_hash,
 	preserve_attribute_case = false,
-	skip_warning = false,
+	is_custom_element = false,
-	is_custom_element = false
+	skip_warning = false
 ) {
 	var current = prev || {};
 	var is_option_element = element.tagName === 'OPTION';