[csswg-drafts] [css-selectors] Consider adding a selector to match the element that has shadow DOM (#9712)

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

== [css-selectors] Consider adding a selector to match the element that has shadow DOM ==
Add the following code to remind users that the undefined elements are used:

<img width="664" alt="Screenshot 2023-12-15 at 12 54 46" src="https://github.com/w3c/csswg-drafts/assets/3841872/6d0f70e1-df8d-49d2-88b8-f53bd89f6191">

```css
:not(:defined) {
  display: block;
  font-size: 0;
}
:not(:defined) * {
  display: none;
}
:not(:defined)::before {
  font-size: 1rem;
  display: block;
  content: 'The element is not defined';
  padding: 1em;
  text-align: center;
  background: gray;
}
```

But now we have [Declarative Shadow DOM](https://github.com/whatwg/dom/issues/831), we can no longer determine which elements may have problems, 

In order to find these elements, it is recommended to add a pseudo class: `:attached`:

```css
:not(:defined, :attached) {
  display: block;
  font-size: 0;
}
:not(:defined, :attached) * {
  display: none;
}
:not(:defined, :attached)::before {
  font-size: 1rem;
  display: block;
  content: 'The element is not defined';
  padding: 1em;
  text-align: center;
  background: gray;
}
```




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


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

Received on Friday, 15 December 2023 04:56:29 UTC