SSR hydration mismatch errors in `class` attributes

[seckardt]

Description

I wanted to bring some subtle SSR hydration mismatch issue to your attention. This gist: If you happen to have a construct like class={classGetter} in a template, and the getter’s implementation returns null or '', you’ll run into hydration mismatch errors in these cases. The error occurs even though the markup generated on the server and the hydrated element’s outerHTML on the client happen to be identical after hydration.

Steps to Reproduce

I created a simplified playground example where you can spot the issue in the DevTools console:

https://stackblitz.com/edit/salesforce-lwc-kiadyb?file=src%2Fmain.js&file=src%2Fmodules%2Fx%2Fcounter%2Fcounter.js%3AL10-L10

Expected Results

No error is thrown / logged.

Actual Results

The logged error on the console looks like this:

[LWC error]: Mismatch hydrating element <button>: attribute "class" has different values, expected null but found null

Version

• LWC: 6.5.3 and 6.6.5 (tested these two versions)

[HermanBide]

is someone working on fixing this issue ? if no, can i look into this issue?