Prevent element property set from throwing errors for readonly properties. Fixes #3681.

Author: pngwn

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Fix tracking of dependencies of compound assignments in reactive statements ([#3634](https://github.com/sveltejs/svelte/issues/3634))
 * Flush changes in newly attached block when using `{#await}` ([#3660](https://github.com/sveltejs/svelte/issues/3660))
 * Throw exception immediately when calling `createEventDispatcher()` after component instantiation ([#3667](https://github.com/sveltejs/svelte/pull/3667))
+* Fix error resulting from trying to set a read-only property when spreading element attributes ([#3681](https://github.com/sveltejs/svelte/issues/3681))
 
 ## 3.12.1
 

src/runtime/internal/dom.ts

@@ -90,10 +90,12 @@ export function attr(node: Element, attribute: string, value?: string) {
 }
 
 export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+	// @ts-ignore
+	const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
 	for (const key in attributes) {
 		if (key === 'style') {
 			node.style.cssText = attributes[key];
-		} else if (key in node) {
+		} else if (descriptors[key] && descriptors[key].set) {
 			node[key] = attributes[key];
 		} else {
 			attr(node, key, attributes[key]);

test/runtime/samples/spread-element-readonly/_config.js

@@ -0,0 +1,9 @@
+export default {
+	skip_if_ssr: true, // DOM and SSR output is different, a separate SSR test exists
+	html: `<input form="qux" list="quu" />`,
+
+	test({ assert, target }) {
+		const div = target.querySelector('input');
+		assert.equal(div.value, 'bar');
+	}
+};

test/runtime/samples/spread-element-readonly/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	let props = {
+		value: 'bar',
+		form: 'qux',
+		list: 'quu',
+	};
+</script>
+
+<input {...props} />

test/server-side-rendering/samples/spread-attributes/_expected.html

@@ -0,0 +1 @@
+<input value="bar" form="qux" list="quu" />

test/server-side-rendering/samples/spread-attributes/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	let props = {
+		value: 'bar',
+		form: 'qux',
+		list: 'quu',
+	};
+</script>
+
+<input {...props} />