fix: correctly handle srcObject attribute on video elements

Author: trueadm

.changeset/bright-jokes-bow.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly handle srcObject attribute on video elements

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

@@ -6,7 +6,7 @@
 import { escape_html } from '../../../../../escaping.js';
 import {
 	is_boolean_attribute,
-	is_dom_property,
+	DOM_PROPERTIES_MAP,
 	is_load_error_element,
 	is_void
 } from '../../../../../utils.js';
@@ -557,8 +557,8 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		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 (is_dom_property(name)) {
-		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
+	} else if (DOM_PROPERTIES_MAP.has(name)) {
+		update = b.stmt(b.assignment('=', b.member(node_id, DOM_PROPERTIES_MAP.get(name)), value));
 	} else {
 		if (name === 'style' && attribute.metadata.expression.has_state && has_call) {
 			// ensure we're not creating a separate template effect for this so that

packages/svelte/src/utils.js

@@ -212,14 +212,14 @@ const DOM_PROPERTIES = [
 	'readOnly',
 	'value',
 	'inert',
-	'volume'
+	'volume',
+	'srcObject'
 ];
 
-/**
- * @param {string} name
- */
-export function is_dom_property(name) {
-	return DOM_PROPERTIES.includes(name);
+export const DOM_PROPERTIES_MAP = new Map();
+
+for (const property of DOM_PROPERTIES) {
+	DOM_PROPERTIES_MAP.set(property.toLowerCase(), property);
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/video-src-object/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<video></video>`,
+
+	test({ assert, target }) {
+		const video = target.querySelector('video');
+
+		// @ts-ignore
+		assert.deepEqual(video?.srcObject, {});
+	}
+});

packages/svelte/tests/runtime-runes/samples/video-src-object/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	let srcObject = $state();
+
+	$effect(() => {
+		srcObject = {};
+	})
+</script>
+
+<video {srcObject}></video>
+