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 434b49caa1..3dd3039213 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 @@ -221,16 +221,7 @@ export function RegularElement(node, context) { if (has_spread) { const attributes_id = b.id(context.state.scope.generate('attributes')); - build_set_attributes( - attributes, - class_directives, - context, - node, - node_id, - attributes_id, - (node.metadata.svg || node.metadata.mathml || is_custom_element_node(node)) && b.true, - is_custom_element_node(node) && b.true - ); + build_set_attributes(attributes, class_directives, context, node, node_id, attributes_id); // If value binding exists, that one takes care of calling $.init_select if (node.name === 'select' && !bindings.has('value')) { 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 2a3d1d537b..b86fb4ff6b 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 @@ -113,9 +113,7 @@ export function SvelteElement(node, context) { inner_context, node, element_id, - attributes_id, - b.id('$$preserve_attribute_case'), - b.id('$$is_custom_element') + attributes_id ); } @@ -158,16 +156,7 @@ export function SvelteElement(node, context) { context.state.node, get_tag, node.metadata.svg || node.metadata.mathml ? b.true : b.false, - inner.length > 0 && - b.arrow( - [ - element_id, - b.id('$$anchor'), - b.id('$$preserve_attribute_case'), - b.id('$$is_custom_element') - ], - b.block(inner) - ), + inner.length > 0 && b.arrow([element_id, b.id('$$anchor')], b.block(inner)), dynamic_namespace && b.thunk(build_attribute_value(dynamic_namespace, context).value), location && b.array([b.literal(location.line), b.literal(location.column)]) ) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js index 81a4b45288..db8f2e4aa0 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js @@ -17,8 +17,6 @@ import { build_template_chunk, get_expression_id } from './utils.js'; * @param {AST.RegularElement | AST.SvelteElement} element * @param {Identifier} element_id * @param {Identifier} attributes_id - * @param {false | Expression} preserve_attribute_case - * @param {false | Expression} is_custom_element */ export function build_set_attributes( attributes, @@ -26,9 +24,7 @@ export function build_set_attributes( context, element, element_id, - attributes_id, - preserve_attribute_case, - is_custom_element + attributes_id ) { let is_dynamic = false; @@ -91,8 +87,6 @@ export function build_set_attributes( element.metadata.scoped && context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash), - preserve_attribute_case, - is_custom_element, is_ignored(element, 'hydration_attribute_changed') && b.true ); diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js index 03fddc5ebd..8861e440fc 100644 --- a/packages/svelte/src/constants.js +++ b/packages/svelte/src/constants.js @@ -33,6 +33,7 @@ export const UNINITIALIZED = Symbol(); export const FILENAME = Symbol('filename'); export const HMR = Symbol('hmr'); +export const NAMESPACE_HTML = 'http://www.w3.org/1999/xhtml'; export const NAMESPACE_SVG = 'http://www.w3.org/2000/svg'; export const NAMESPACE_MATHML = 'http://www.w3.org/1998/Math/MathML'; diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js index 779fe92c9b..18641300e5 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js @@ -1,5 +1,5 @@ /** @import { Effect, TemplateNode } from '#client' */ -import { FILENAME, NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js'; +import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js'; import { hydrate_next, hydrate_node, @@ -28,7 +28,7 @@ import { is_raw_text_element } from '../../../../utils.js'; * @param {Comment | Element} node * @param {() => string} get_tag * @param {boolean} is_svg - * @param {undefined | ((element: Element, anchor: Node | null, preserve_attribute_case: boolean, is_custom_element: boolean) => void)} render_fn, + * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn, * @param {undefined | (() => string)} get_namespace * @param {undefined | [number, number]} location * @returns {void} @@ -137,17 +137,11 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio } } - var is_custom_element = element.nodeName.includes('-'); - var preserve_attribute_case = - is_custom_element || - element.namespaceURI === NAMESPACE_SVG || - element.namespaceURI === NAMESPACE_MATHML; - // `child_anchor` is undefined if this is a void element, but we still // need to call `render_fn` in order to run actions etc. If the element // contains children, it's a user error (which is warned on elsewhere) // and the DOM will be silently discarded - render_fn(element, child_anchor, preserve_attribute_case, is_custom_element); + render_fn(element, child_anchor); } // we do this after calling `render_fn` so that child effects don't override `nodes.end` diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index aa1d269621..2e435acc24 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -15,6 +15,7 @@ import { } from '../../runtime.js'; import { clsx } from '../../../shared/attributes.js'; import { set_class } from './class.js'; +import { NAMESPACE_HTML, NAMESPACE_MATHML } from '../../../../constants.js'; export const CLASS = Symbol('class'); export const STYLE = Symbol('style'); @@ -261,20 +262,13 @@ 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} [is_custom_element] * @param {boolean} [skip_warning] * @returns {Record} */ -export function set_attributes( - element, - prev, - next, - css_hash, - preserve_attribute_case = false, - is_custom_element = false, - skip_warning = false -) { +export function set_attributes(element, prev, next, css_hash, skip_warning = false) { + var is_custom_element = element.nodeName.includes('-'); + var preserve_attribute_case = is_custom_element || element.namespaceURI !== NAMESPACE_HTML; + // If we're hydrating but the custom element is from Svelte, and it already scaffolded, // then it might run block logic in hydration mode, which we have to prevent. let is_hydrating_custom_element = hydrating && is_custom_element;