Hydration mismatch when using dynamic `render()` and scoped styles

[nolanlawson]

If you have a component with a dynamic render(), and if that render() function may return A) a template with scoped styles or B) a template without scoped styles, and if A is not the default, then you will see a hydration mismatch error:

Mismatch hydrating element <x-child>: attribute "class" has different values, expected "" but found "lwc-1o0kq40crvg-host"

The root cause seems to be that we validate the class attribute before we run the render() function. Before we run the render() function, we don't know what the stylesheet host token should be.

Interestingly, this does not occur for different HTML contents inside of the two different templates, because we run render() correctly before we run hydrateElement/hydrateStaticParts/etc.

Repro: a9f9f560b

[git2gus[bot]]

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

[nolanlawson]

Actually, it doesn't matter which one is the default. If you have two scoped-styled-templates then you also get this error:

render() {
  return this.condition ? scoped : alsoScoped // same error
}

Repro: 7a8044c3d