determine element traits inside set_attributes

Author: Rich-Harris

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')) {

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)])
 			)

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

@@ -17,18 +17,14 @@ 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,
 	class_directives,
 	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
 	);
 

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';
 

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`

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<string | symbol, any> | undefined} prev
  * @param {Record<string | symbol, any>} 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<string, any>}
  */
-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;