- From: Hiroya UGA via GitHub <noreply@w3.org>
- Date: Thu, 16 Apr 2026 00:22:36 +0000
- To: public-css-archive@w3.org
Hi! I'd like to share a use case.
I use a third-party widget that requires domain registration before it initializes. The host structure looks like this:
```html
<li>
<div id="widget">
<script src="..."></script>
<script src="..."></script>
</div>
</li>
```
Until my domain is approved, no shadow root is attached and the `<li>` renders as an empty placeholder. Once registered, an open shadow root is created and the widget renders.
I want to hide the `<li>` with CSS until the shadow root appears:
```css
li:not(:has-shadowroot) {
display: none;
}
```
or
```css
li:not(:has(::shadow-root)) {
display: none;
}
```
This may be a niche case, but it represents a pure CSS styling use case — distinct from the JS/DOM traversal use cases already discussed here and in #2908.
So I decided to leave a comment.
I hope this helps the discussion.
(Note: English is not my first language and I used a translation tool for this comment. I apologize if anything is unclear.)
--
GitHub Notification of comment by hiroya-uga
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11007#issuecomment-4256539366 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 16 April 2026 00:22:37 UTC