Hydration validation incorrectly fails for statically optimized content

[jmsjtu]

Description

Statically optimized content fails hydration validation when static and dynamic attributes are mixed on the same element.

Steps to Reproduce

<template lwc:render-mode="light">
    <div class="wrapper" style={computedWrapperStyle}>
    </div>
</template>

The above will fail hydration validation because each static part always validates the attributes, styles and class names against the element.

Since class is static it will be assigned when the fragment is created by the browser and does not have an associated static part.

Expected Results

Hydration validation should not fail.

Actual Results

Hydration validation failing.

Possible Solution

We should opt out of validating against style or class if it's not present on the static part.

The purpose of the hydration validation is to ensure that hydration occurred successfully, in this case hydration does not occur for the static values.

[git2gus[bot]]

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

[HermanBide]

has this issue been fixed if not can i try to work on it?

[jmsjtu]

@HermanBide thanks for your interest!

We're already working on a fix that should be ready later today.

If you'd like to contribute, we have other issues under the "Up for grabs" label.