:host(.foo, .bar)
is styled differently in synthetic shadow and scoped light DOM vs native shadow
#3225
Labels
BUG P3
light-dom
This label represents any issue that relates to the feature of Light DOM
Synthetic Shadow
Synthetic shadow DOM polyfill
Consider this CSS:
In Chrome and Firefox, this will render the text as red in synthetic shadow:
But not in native shadow:
That's because
:host()
actually accepts a compound selector, not a selector list. So:host(.foo, .bar)
is an invalid selector.Unfortunately, in the style compiler, we treat it as valid and convert it into a new selector (which really is valid):
Here is the code that does that:
lwc/packages/@lwc/style-compiler/src/selector-scoping/transform.ts
Lines 126 to 138 in 0265047
In Safari the behavior is different, but I believe that may be a bug, so I filed a bug on WebKit.
The text was updated successfully, but these errors were encountered: