feat(style-compiler): enable :root & :host-context() for native-shadow-only CSS #4833
Conversation
cardoso
changed the title
There was a problem hiding this comment.
This looks great to me! Thanks for jumping on it so fast. (Impressive! 🤩)
One small issue I notice here is that, if this is a scoped CSS file (foo.scoped.css) then the selectors are compiled into:
:root.foo {}
:host-context(.foo) {}These are both valid selectors (TIL) but they don't make much sense for scoped styes. For the :root, you cannot add a class to a shadow root, nor does LWC add a class to the <html> which is where it would need to be at the top level. As for :host-context(), LWC also doesn't add the .foo selector to an ancestor of the host.
I would just have these throw an error if we are in scoped mode. You can test it in the fixtures by adding "scoped": true to the config.json.
Thanks again!!
|
Thanks for the review @nolanlawson 😄 I'll work on the scoped case tomorrow. |
|
@nolanlawson I handled the scoped case in the last commit. I kept it simple, but maybe it'd be better to have different error messages for synthetic & unscoped vs native & scoped? |
|
/nucleus test |
Details
Closes #4832
Does this pull request introduce a breaking change?
Does this pull request introduce an observable change?
If
disableSyntheticShadowSupport: trueis specified, using :root and :host-context() will no longer result in errors.GUS work item