chore: small tweaks on set_attributes()

.changeset/wise-hats-wonder.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: small tweaks on set_attributes()

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

@@ -114,8 +114,8 @@ export function SvelteElement(node, context) {
 			node,
 			element_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('-'))
+			b.id('$$preserve_attribute_case'),
+			b.id('$$is_custom_element')
 		);
 	}
 
@@ -158,7 +158,16 @@ 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.block(inner)),
+				inner.length > 0 &&
+					b.arrow(
+						[
+							element_id,
+							b.id('$$anchor'),
+							b.id('$$preserve_attribute_case'),
+							b.id('$$is_custom_element')
+						],
+						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

@@ -88,9 +88,11 @@ export function build_set_attributes(
 		element_id,
 		is_dynamic ? attributes_id : b.literal(null),
 		b.object(values),
-		element.metadata.scoped &&
-			context.state.analysis.css.hash !== '' &&
-			b.literal(context.state.analysis.css.hash),
+		element.metadata.scoped && context.state.analysis.css.hash !== ''
+			? b.literal(context.state.analysis.css.hash)
+			: is_custom_element
+				? b.null
+				: false,
 		preserve_attribute_case,
 		is_custom_element,
 		is_ignored(element, 'hydration_attribute_changed') && b.true

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -1,5 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
-import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
+import { FILENAME, NAMESPACE_MATHML, 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) => void)} render_fn,
+ * @param {undefined | ((element: Element, anchor: Node | null, preserve_attribute_case: boolean, is_custom_element: boolean) => void)} render_fn,
  * @param {undefined | (() => string)} get_namespace
  * @param {undefined | [number, number]} location
  * @returns {void}
@@ -137,11 +137,17 @@ 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);
+					render_fn(element, child_anchor, preserve_attribute_case, is_custom_element);
 				}
 
 				// 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

@@ -432,7 +432,7 @@ export function set_attributes(
 				// @ts-ignore
 				element[name] = value;
 			} else if (typeof value !== 'function') {
-				set_attribute(element, name, value);
+				set_attribute(element, name, value, skip_warning);
 			}
 		}
 		if (key === 'style' && '__styles' in element) {