fix: ensure muted DOM property works correctly in FF (#13751)

Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Simon H <[email protected]>

Author: 3 people

.changeset/wise-timers-look.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure muted DOM property works correctly in FF

packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js

@@ -77,7 +77,9 @@ export function RegularElement(node, context) {
 
 	if (
 		node.attributes.some(
-			(attribute) => attribute.type === 'Attribute' && attribute.name === 'autofocus'
+			(attribute) =>
+				attribute.type === 'Attribute' &&
+				(attribute.name === 'autofocus' || attribute.name === 'muted')
 		)
 	) {
 		mark_subtree_dynamic(context.path);

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

@@ -264,6 +264,7 @@ export function RegularElement(node, context) {
 			if (
 				!is_custom_element &&
 				attribute.name !== 'autofocus' &&
+				attribute.name !== 'muted' &&
 				(attribute.value === true || is_text_attribute(attribute))
 			) {
 				const name = get_attribute_name(node, attribute);
@@ -531,6 +532,12 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		return false;
 	}
 
+	// Special case for Firefox who needs it set as a property in order to work
+	if (name === 'muted') {
+		state.init.push(b.stmt(b.assignment('=', b.member(node_id, b.id('muted')), value)));
+		return false;
+	}
+
 	/** @type {Statement} */
 	let update;
 

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

@@ -142,7 +142,7 @@ function is_static_element(node) {
 			return false;
 		}
 
-		if (attribute.name === 'autofocus') {
+		if (attribute.name === 'autofocus' || attribute.name === 'muted') {
 			return false;
 		}
 

packages/svelte/tests/css/samples/omit-scoping-attribute-attribute-selector/expected.html

@@ -1,2 +1,2 @@
-<div><video class="svelte-xyz" autoplay muted></video>
-	<video muted></video></div>
+<div><video class="svelte-xyz" autoplay></video>
+	<video></video></div>