lwc icon indicating copy to clipboard operation
lwc copied to clipboard

Normalize whitespace for attributes (breaking change)

Open nolanlawson opened this issue 4 months ago • 4 comments

For HTML templates containing static style/class attributes such as this:

<div class=" foo bar     baz "></div>
<div style=" color  :  red ! important  "></div>

... we are inconsistent about how this is actually serialized to the DOM. For static-optimized nodes, the attributes are kept as-is. For non-static-optimized nodes, the whitespace/semicolons are normalized:

<div class="foo bar baz"></div>
<div style="color: red !important;"></div>

This also applies to the case of blank vs missing attributes. For example:

<div class=""></div>
<div style=" "></div>

In the static-optimized case, these attributes are kept as-is. For the non-static-optimized case, the attributes are removed entirely:

<div></div>
<div></div>

This doesn't really matter unless the developer is doing something zany (e.g. querySelector('[class="foo bar baz"]') rather than querySelector('.foo.bar.baz')), but we should at least be consistent about it.

We have also warned developers about this in the past, but not every developer follows these guidelines.

This would be a potentially breaking change.

nolanlawson avatar Apr 05 '24 15:04 nolanlawson

can i work on this ?

HermanBide avatar Apr 09 '24 17:04 HermanBide

@HermanBide I would recommend against taking this one, since it is a breaking change and so we will have to be careful about it.

nolanlawson avatar Apr 09 '24 18:04 nolanlawson