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

Author: pngwn

src/runtime/internal/dev.ts

@@ -1,4 +1,4 @@
-import { custom_event, append, insert, detach, listen, attr } from './dom';
+import { custom_event, append, insert, detach, listen, attr, set_attributes } from './dom';
 import { SvelteComponent } from './Component';
 
 export function dispatch_dev<T=any>(type: string, detail?: T) {
@@ -59,6 +59,14 @@ export function attr_dev(node: Element, attribute: string, value?: string) {
 	else dispatch_dev("SvelteDOMSetAttribute", { node, attribute, value });
 }
 
+export function set_attributes_dev(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+	for (const key in attributes) {
+		if (!(key in node))
+			console.warn(`Property "${key}" does not exist on ${node.nodeName}. When spreading attributes, ensure they are all valid attributes for that element.`);
+	}
+	set_attributes(node, attributes);
+}
+
 export function prop_dev(node: Element, property: string, value?: any) {
 	node[property] = value;
 

src/runtime/internal/dom.ts

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

test/runtime/samples/dev-warning-unknown-spread-attributes/_config.js

@@ -0,0 +1,11 @@
+export default {
+	skip_if_ssr: true,
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		`Property "boohoo" does not exist on INPUT. When spreading attributes, ensure they are all valid attributes for that element.`,
+		`Property "spigidilly" does not exist on INPUT. When spreading attributes, ensure they are all valid attributes for that element.`
+	]
+};

test/runtime/samples/dev-warning-unknown-spread-attributes/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	const props = {
+		boohoo: 'foo',
+		spigidilly: 'bar',
+	};
+</script>
+
+<input {...props} />

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

@@ -0,0 +1,10 @@
+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} />