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

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] Behavior of :root inside Shadow DOM ==
# The short version

Using `:root` in Shadow DOM currently does not match anything. Sparked by https://x.com/Th3S4mur41/status/1805198579910238380 I think it would make sense to have that match the Shadow Root.

One wouldn’t be able to use it to style the shadow with it, but it would enable use-cases such as `:has(:popover-open)` because that selector would then also match `:root:has(:popover-open)` – similar to how it behaves in Light DOM.

It would fix situations [such as this one](https://codepen.io/th3s4mur41/pen/MWdVVpG).

# The long version

In https://x.com/Th3S4mur41/status/1805198579910238380 an author wondered why the following worked in Light DOM but not in Shadow DOM as seen in [this demo](https://codepen.io/th3s4mur41/pen/MWdVVpG):

```css
/* Change the popover invoker style when open */
:has([popover]:popover-open) [popovertarget="mypopover"] {
 background: yellow;
}
```

Note that in the Shadow DOM variant the popover itself is also part of the Shadow DOM:

```html
<div id="shadow" class="container">
  ↳ #shadow-root
      <button popovertarget="shadowpopover">button in shadow DOM</button>
      <div id="shadowpopover" popover="">popover in shadow DOM</div>
</div>
```

Reducing the code it’s the `:has(:popover-open)` that is not working as the author expected. This because with an open popover, `:has(:popover-open)` can only match the `#shadow-root`, which itself is not selectable.

This [gave me the idea](https://x.com/bramus/status/1805323470105891150) to have `:root` match the `#shadow-root`. One wouldn’t be able to style anything with it, but it would make the use-case above work because `:has(:popover-open)` – which is `*:has(:popover-open)` – would then be able to match the shadow-root.

/cc @keithamus and @lukewarlow who participated in the discussion on X.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10492 using your GitHub account


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

Received on Tuesday, 25 June 2024 07:46:23 UTC