From ff5e835bf077b67bd10ec1e702b97f419ec87f00 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 30 Mar 2026 22:37:41 +0200
Subject: [PATCH] fix: handle autofocus and muted

---
 .../phases/3-transform/client/visitors/RegularElement.js   | 6 +++---
 .../custom-renderers/samples/special-attributes/_config.js | 7 +++----
 .../samples/special-attributes/main.svelte                 | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

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 5d7232a1aa..a649d87726 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
@@ -257,7 +257,7 @@ export function RegularElement(node, context) {
 				if (name !== 'class' || value) {
 					context.state.template.set_prop(attribute.name, value === true ? '' : value);
 				}
-			} else if (name === 'autofocus') {
+			} else if (name === 'autofocus' && !context.state.options.customRenderer) {
 				let { value } = build_attribute_value(attribute.value, context);
 				context.state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
 			} else if (name === 'class') {
@@ -615,7 +615,7 @@ function build_element_attribute_update(
 	attributes,
 	custom_renderer = false
 ) {
-	if (name === 'muted') {
+	if (name === 'muted' && !custom_renderer) {
 		// Special case for Firefox who needs it set as a property in order to work
 		return b.assignment('=', b.member(node_id, b.id('muted')), value);
 	}
@@ -656,7 +656,7 @@ function build_element_attribute_update(
 		return b.call('$.set_default_checked', node_id, value);
 	}
 
-	if (is_dom_property(name)) {
+	if (is_dom_property(name) && !custom_renderer) {
 		return b.assignment('=', b.member(node_id, name), value);
 	}
 
diff --git a/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
index 270aa7975a..34ff2fe38c 100644
--- a/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples/special-attributes/_config.js
@@ -2,10 +2,7 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	test({ assert, target, serialize, dispatch_event }) {
-		// Initial state
-		const html = serialize(target);
-
+	test({ assert, target, dispatch_event }) {
 		// Find all inputs and the button
 		const inputs = target.children.filter(
 			(/** @type {any} */ n) => n.type === 'element' && n.name === 'input'
@@ -22,6 +19,8 @@ export default test({
 		assert.equal(input_value.attributes['value'], 'hello');
 		assert.equal(input_value.attributes['class'], 'hello');
 		assert.equal(input_value.attributes['style'], 'color: blue');
+		assert.equal(input_value.attributes['autofocus'], 'true');
+		assert.equal(input_value.attributes['muted'], 'true');
 
 		// Input 2: type="checkbox" checked=""
 		const input_checked = inputs[1];
diff --git a/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte b/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
index 1139780d5b..2371fcac8b 100644
--- a/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
+++ b/packages/svelte/tests/custom-renderers/samples/special-attributes/main.svelte
@@ -8,7 +8,7 @@
 	let spread = $derived({value, class: class_name, style});
 </script>
 
-<input {value} class={class_name} {style} />
+<input autofocus muted {value} class={class_name} {style} />
 <input type="checkbox" checked={checked} />
 <input value="fixed" defaultValue={default_value} />
 <input type="checkbox" checked defaultChecked={default_checked} />