[css-scoping][selectors] :root should resolve to :host in shadow trees

[LeaVerou]

https://drafts.csswg.org/selectors/#the-scope-pseudo

Currently, if used in regular CSS but outside an @scope rule, :scope resolves to :root. However, this is not super useful within shadow CSS. :host would be a lot more natural.

This would be a breaking change, but I’d wager the prevalence of :scope outside @scope in shadow CSS is so low that we can still make it.

This means the same CSS can be used within Shadow DOM to style the component, as well as using @import ... scope(...) to style light DOM elements.

[sorvell]

This means the same CSS can be used within Shadow DOM to style the component, as well as using @import ... scope(...) to style light DOM elements.

This is indeed an annoying pain point right now when trying to share styles. While you can write :where(:host, :scope, :root), it's cumbersome and I believe this isn't currently supported in Safari (bug or unspec'd?).

Separately and for the same reason could :root resolve to :host in a shadow tree?

[LeaVerou]

Separately and for the same reason could :root resolve to :host in a shadow tree?

YES!

Actually, that’s all we need. Since :scope resolves to :root outside @scope, if :root resolves to :host, by proxy :scope also resolves to :host. I’ll rename the issue.