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

@bramus 

> I would expect `:root:has([popover]:popover-open)` to work in both cases. 

That's the thing, I would *not* expect this to work. `:root` is effectively the same as `html`, which does not exist inside shadow DOM.

> I don’t think we should force authors to rewrite their stylesheets when using them inside a shadow root or not.

Ironically, with this change, you would be forcing authors who rely on the current `:root` behavior to rewrite their stylesheets. For example, someone might have written something like `:root { height: 100% }` knowing that it only applies to `<html>` and not shadow-roots.

---

I think it's worth focusing on @tabatkins and @lukewarlow's [discussion](https://github.com/w3c/csswg-drafts/issues/10492#issuecomment-2190028991) for a second.

`:host` refers to the host element in light DOM. `:host(:has())` wouldn't check for the presence of elements inside the shadow-tree. It would look only in the light tree, because that's where the element is.

For example, this works in Firefox and Safari today (but not in Chrome?):

```html
<div>
  <template shadowrootmode="open">
    <style>
      :host(:has(p)) { color: red; }
    </style>
    <slot></slot>
  </template>

  <p>Red in the light DOM</p>
</div>
```

---

@Th3S4mur41 I should point out that a `:shadowroot`-like selector is also being [discussed](https://github.com/WICG/webcomponents/issues/1053) to allow styling shadow-tree elements from the outside. I imagine it would it would be used like `my-component:shadowroot(div)`. Maybe the two ideas would conflict, or maybe they could be made to work together.

-- 
GitHub Notification of comment by mayank99
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10492#issuecomment-2200321265 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 14:29:36 UTC