Spread is not consistent with attribute for style

[adiguba]

Describe the bug

I just found that spreading the style attribute have a different result from setting it directly

These two lines are not equivalent on client-side (server-side is OK) :

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

=> That's because the attribute style is set via element.setAttribute(), but with spreads it set via style.cssText

svelte/packages/svelte/src/internal/client/dom/elements/attributes.js

Lines 378 to 380 in c40392c

	} else if (key === 'style' && value != null) {
	element.style.cssText = value + '';
	} else if (key === 'autofocus') {

I think that this line could fix the problem :

		} else if (key === 'style' && value != null) {
-			element.style.cssText = value + '';
+			set_attribute(element, key, value);
		} else if (key === 'autofocus') {

Reproduction

https://svelte.dev/playground/hello-world?version=5.20.1#H4sIAAAAAAAACm2RUU_CMBDHv0pTH4AEhiY-dXOJURJNRB9EXxgPXXcjC127tDeEkH1322YEEXIv7e_-979e70AVr4Ey-gJSavKjjSzIEIoKoRjRMS0rCZay5YHivvE6Dxzvqx6bJrJbkOhZzi1c40IrBIXOhiZWmKrBNFMZSkBicS-BPJBBzc26Uuy-2cU5F5u10a0q2E155yMWQrDbWGipDVsbANWfc9nCIM5UMj35qufXb8IcK6otOYQGXZpM3S09wiiK-sQpk6mnr8_Fx3wye5vNZ--LYCFai7qegITaDfDH7TyRXpGe97jQ-0hCPvzF_2rPMiwq20i-ZySXWmxiD7tL9TLYrBjjJYIZe4Eb6ZweHftVMMIRzTBIRkdf94nhPW5jCDukDE0L3ar7BYgUaukjAgAA

Logs

System Info

REPL

Severity

annoyance

[adiguba]

Note : for custom-element the difference come from the set_custom_element_data()

[dummdidumm]

What is the difference I'm supposed to be seeing (and in which browser, if that makes a difference)?

[adiguba]

The only difference is the value of the style attribute.

With spreading, the style attribute is processed by the browser and reformated :

• Invalid and duplicate attribute are removed.
• Colors use the rgb() format

And I think it's evaluated again on hydration.

Tested on Chrome & Firefox

[dummdidumm]

Thanks for clarifying.
So yes, it's formatted, but does that lead to any issues? Can't we just let it get normalized? (which would mean adjusting the PR such that the "if style" condition goes away, it just falls through to set_attribute, and set_attribute is not adjusted)

[adiguba]

It's not a big deal and there not difference on render.
The only issue is that node.getAttribute('style') will return a different value, which can be disturbing.

Example in DOM inspector :

I also think that the style may be processed twice on page loading, because the value is re-set via node.style.cssText (or element['style'] for component)

I just see that writing a test for the PR #15311

[adiguba]

I make a demo on sveltelabs for hydration : https://www.sveltelab.dev/7c65e2chz1msknn
(could not use REPL because there no SSR)

On the layout I create an observer to logs mutations.
The DIV are correctly generated on SRR, but there a mutation on the spread :

init observer
Init div#style-attr: class=null style=margin:4px;background:#f1f1f1;ccc:0;color:green;color:blue
Init div#style-sprd: class=null style=margin:4px;background:#f1f1f1;ccc:0;color:green;color:blue
afterNavigate
Mutation div#style-sprd: style=margin: 4px; background: rgb(241, 241, 241); color: blue;

Note that the class: and style: directive also produces mutations on hydration...