Style property used together with a spread property assigns to a read-only property

[kaisermann]

REPL

<div {style} {...attrs}></div>

Generates a update function as:

		p: function update(changed, ctx) {
			setAttributes(div, getSpreadUpdate(div_levels, [
				(changed.style) && { style: ctx.style },
				(changed.attrs) && ctx.attrs,
				{ class: "svelte-ajb4ym" }
			]));
		},

The setAttribute finds the style property in the node and tries to overwrite it:

If you remove the {...attrs}, it generates as:

		p: function update(changed, ctx) {
			if (changed.style) {
				div.style.cssText = ctx.style;
			}
		},

[Rich-Harris]

Just revisiting this now... I might be losing my marbles but what is wrong here? It seems like it's behaving correctly!

[kaisermann]

@Rich-Harris My bad, I wasn't clear enough here! 😬

The style property should not be directly assigned to since it's a read-only property:

So, for a single <div {style}>, we get a nice div.style.cssText = ..., but with a spread operator <div {style} {...foo}>, we get a behavior equivalent to div['style'] = ...

In addition, it behaves correctly on modern browsers because they can handle assigning a string directly to the style, but some older browsers can't.

[Rich-Harris]

Ah, ok, it's a cross-browser thing. I brought it up because I was unable to create a failing test using getComputedStyle! I think it would be easily fixed by changing this:

export function setAttributes(node, attributes) {
	for (var key in attributes) {
-		if (key in node) {
+		if (key === 'style') {
+			node.style.cssText = attributes[key];
+		} else if (key in node) {
			node[key] = attributes[key];
		} else {
			if (attributes[key] === undefined) removeAttribute(node, key);
			else setAttribute(node, key, attributes[key]);
		}
	}
}

[fdArcher]

for svg el just wrap in a other html tag will it works
<span style="color:#aaa"><svg class="icon" aria-hidden="true"><use xlink:href="#ico-shezhi"></use></svg></span>
if you set slots.default as this and remove
chrome will say: Cannot assign to read only property 'className' of object '# .etc

[Rich-Harris]

This looks like it's fixed in v3 — closing https://svelte.dev/repl/c1ef7df3e65546aba07137ff2bd7d91d?version=3.6.2