Re: [csswg-drafts] [selectors] Behavior of :root inside Shadow DOM (#10492)

> ([#](https://github.com/w3c/csswg-drafts/issues/10492#issuecomment-2189966742)) I'm a little confused by the use-case, tho - how would this help `:has([popover]:popover-open) [popovertarget="mypopover"]` match? `:root` isn't mentioned in there at all.

`:has([popover]:popover-open)` has an implicit universal selector prepended to it. Problem here is that `*` doesn’t match the shadow root itself (which, in itself, makes sense). Therefore authors can’t copy over code from Light do Shadow DOM without changing the selectors.

The suggestion was to have `:root` match the Shadow Root. That way the `*` selector would also match that Shadow Root, resulting in `:has([popover]:popover-open)` / `:root:has([popover]:popover-open)` work in both Light _and_ Shadow DOM.

_(Admittedly authors should write `:root:has([popover]:popover-open)` instead of `:has([popover]:popover-open)` for performance reasons)_

> ([#](https://github.com/w3c/csswg-drafts/issues/10492#issuecomment-2190427978)) Currently, `:root` is the only selector that never matches anything inside shadow DOM. Today, I can use this knowledge to write `@scope (:root)` rules which don't get applied to shadow elements, even if the stylesheet gets adopted/linked in the shadow DOM.

If `:root` also were to match the Shadow Root, you would not lose this ability as you can then achieve the same with `:host :root`.

> ([#](https://github.com/w3c/csswg-drafts/issues/10492#issuecomment-2190427978)) The original problem can be solved using a selector like `[popovertarget="shadowpopover"]:has(+ :popover-open)`.

I don’t think we should force authors to rewrite their stylesheets when using them inside a shadow root or not. I would expect `:root:has([popover]:popover-open)` to work in both cases. That way they can import and adopt stylesheets in Light and Shadow DOM.

> ([#](https://github.com/w3c/csswg-drafts/issues/10492#issuecomment-2199556294)) Wouldn't a dedicated `:shadowroot` selector make sense in that case?

That would also make the original use-case work, but would require authors to write `:is(:root, :shadowroot):has([popover]:popover-open)` to make their stylesheets portable while also writing a more performant selector than simply `:has([popover]:popover-open)`

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10492#issuecomment-2200038859 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 1 July 2024 12:40:09 UTC