fix

Author: Rich-Harris

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

@@ -3,7 +3,7 @@
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
-import { is_boolean_attribute, is_void } from '../../../../../utils.js';
+import { is_boolean_attribute, is_dom_property, is_void } from '../../../../../utils.js';
 import { escape_html } from '../../../../../escaping.js';
 import { dev, is_ignored, locator } from '../../../../state.js';
 import {
@@ -12,7 +12,7 @@ import {
 	is_text_attribute
 } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { DOMProperties, LoadErrorElements } from '../../../constants.js';
+import { LoadErrorElements } from '../../../constants.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { serialize_get_binding } from '../utils.js';
@@ -598,7 +598,7 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		update = b.stmt(b.call('$.set_value', node_id, value));
 	} else if (name === 'checked') {
 		update = b.stmt(b.call('$.set_checked', node_id, value));
-	} else if (DOMProperties.includes(name)) {
+	} else if (is_dom_property(name)) {
 		update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
 	} else {
 		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';

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

@@ -1,8 +1,11 @@
 /** @import { Expression, Identifier } from 'estree' */
 /** @import { Attribute, ClassDirective, DelegatedEvent, ExpressionMetadata, ExpressionTag, Namespace, OnDirective, RegularElement, StyleDirective, SvelteElement, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import { ATTRIBUTE_ALIASES } from '../../../../../../constants.js';
-import { is_capture_event, is_passive_event } from '../../../../../../utils.js';
+import {
+	is_capture_event,
+	is_passive_event,
+	normalize_attribute
+} from '../../../../../../utils.js';
 import { get_attribute_expression } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { serialize_get_binding } from '../../utils.js';
@@ -118,18 +121,15 @@ export function serialize_attribute_value(value, context) {
  * @param {{ state: { metadata: { namespace: Namespace }}}} context
  */
 export function get_attribute_name(element, attribute, context) {
-	let name = attribute.name;
 	if (
 		!element.metadata.svg &&
 		!element.metadata.mathml &&
 		context.state.metadata.namespace !== 'foreign'
 	) {
-		name = name.toLowerCase();
-		if (name in ATTRIBUTE_ALIASES) {
-			name = ATTRIBUTE_ALIASES[name];
-		}
+		return normalize_attribute(attribute.name);
 	}
-	return name;
+
+	return attribute.name;
 }
 
 /**

packages/svelte/src/compiler/phases/constants.js

@@ -1,14 +1,3 @@
-import { ATTRIBUTE_ALIASES } from '../../constants.js';
-import { DOM_BOOLEAN_ATTRIBUTES } from '../../utils.js';
-
-export const DOMProperties = [
-	...Object.values(ATTRIBUTE_ALIASES),
-	'value',
-	'inert',
-	'volume',
-	...DOM_BOOLEAN_ATTRIBUTES
-];
-
 export const Runes = /** @type {const} */ ([
 	'$state',
 	'$state.frozen',

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

@@ -1,13 +1,13 @@
 import { DEV } from 'esm-env';
 import { hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
-import { ATTRIBUTE_ALIASES, NAMESPACE_SVG } from '../../../../constants.js';
+import { NAMESPACE_SVG } from '../../../../constants.js';
 import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '../../constants.js';
 import { queue_idle_task, queue_micro_task } from '../task.js';
-import { is_capture_event, is_delegated } from '../../../../utils.js';
+import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
 
 /**
  * The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
@@ -268,8 +268,7 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 		} else {
 			var name = key;
 			if (lowercase_attributes) {
-				name = name.toLowerCase();
-				name = ATTRIBUTE_ALIASES[name] || name;
+				name = normalize_attribute(name);
 			}
 
 			if (setters.includes(name)) {

packages/svelte/src/utils.js

@@ -180,6 +180,44 @@ export function is_boolean_attribute(name) {
 	return DOM_BOOLEAN_ATTRIBUTES.includes(name);
 }
 
+/**
+ * @type {Record<string, string>}
+ * List of attribute names that should be aliased to their property names
+ * because they behave differently between setting them as an attribute and
+ * setting them as a property.
+ */
+const ATTRIBUTE_ALIASES = {
+	// no `class: 'className'` because we handle that separately
+	formnovalidate: 'formNoValidate',
+	ismap: 'isMap',
+	nomodule: 'noModule',
+	playsinline: 'playsInline',
+	readonly: 'readOnly'
+};
+
+/**
+ * @param {string} name
+ */
+export function normalize_attribute(name) {
+	name = name.toLowerCase();
+	return ATTRIBUTE_ALIASES[name] ?? name;
+}
+
+const DOM_PROPERTIES = [
+	...Object.values(ATTRIBUTE_ALIASES),
+	'value',
+	'inert',
+	'volume',
+	...DOM_BOOLEAN_ATTRIBUTES
+];
+
+/**
+ * @param {string} name
+ */
+export function is_dom_property(name) {
+	return DOM_PROPERTIES.includes(name);
+}
+
 const PASSIVE_EVENTS = ['wheel', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
 
 /**