Inconsistent rendering of empty class/style in static vs dynamic nodes

[nolanlawson]

Description

The following template HTML:

<!-- empty class -->
<div data-dynamic={dynamic} class=""></div>
<div class=""></div>
<!-- empty style -->
<div data-dynamic={dynamic} style=""></div>
<div style=""></div>
<!-- empty attr -->
<div data-dynamic={dynamic} data-attr=""></div>
<div data-attr=""></div>
<!-- nonexistent class/style/attr -->
<div data-dynamic={dynamic}></div>
<div></div>

...results in the following serialized HTML:

<!-- empty class -->
<div></div>
<div class=""></div>
<!-- empty style -->
<div></div>
<div style=""></div>
<!-- empty attr -->
<div data-attr></div>
<div data-attr=""></div>
<!-- nonexistent class/style/attr -->
<div></div>
<div></div>

Update: this works the same for client-rendering as well: playground.

Note that class and style are inconsistent – they are serialized as '' in the static case, and nonexistent in the dynamic case.

This means that the behavior of getAttribute differs at runtime – either returning '' or null. Also, CSS selectors like [class] or [style] will behave differently.

Steps to Reproduce

git clone git@github.com:nolanlawson/lwc-barebone.git
cd lwc-barebone
git checkout 214418d
yarn dev # go to localhost:3000

Expected Results

Serialized output is the same regardless of whether the vnode is static-optimized or not.

Actual Results

Static optimization leads to different results, only for class and style.

[nolanlawson]

For the most consistency, and to align with author intention, I think we should serialize the empty string in all cases. If the author put class="", then let's serialize class="".

FYI @divmain

[git2gus]

This issue has been linked to a new work item: W-13520254

[nolanlawson]

Just realized this works the same as CSR, not just SSR. Updated.

[nolanlawson]

Since it already works this way in CSR, this would be an observable (breaking) change.