diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js index 538e410855..7156845d7b 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js +++ b/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, - is_ignored(element, 'hydration_attribute_changed') && b.true, - element.name.includes('-') && b.true + preserve_attribute_case, + is_custom_element, + is_ignored(element, 'hydration_attribute_changed') && b.true ) ) ); diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js index 72f71d5d0c..11eb1e85ed 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js +++ b/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')), - is_ignored(element, 'hydration_attribute_changed') && b.true, - b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-')) + preserve_attribute_case, + is_custom_element, + is_ignored(element, 'hydration_attribute_changed') && b.true ); if (is_reactive) { diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 29e872dc24..db3ac5fa4e 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -149,9 +149,9 @@ export function set_custom_element_data(node, prop, value) { * @param {Record | undefined} prev * @param {Record} next New attributes - this function mutates this object * @param {string} [css_hash] - * @param {boolean} preserve_attribute_case - * @param {boolean} [skip_warning] + * @param {boolean} [preserve_attribute_case] * @param {boolean} [is_custom_element] + * @param {boolean} [skip_warning] * @returns {Record} */ 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';