[csswg-drafts] Add a CSS selector to only target built in elements (#11140)

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

== Add a CSS selector to only target built in elements ==


## Proposal 

Add a selector to only target built in elements.

## Why?

with custom elements being more and more prevalent, it's sometimes important to separate custom elements from built in elements, especially with things like CSS resets.

common scenario in a CSS reset such as Tailwind:

```css
* {
  border: 0;
}
```

but this can mess up custom elements that use a `:host { border: 1px solid black; }` css rule.

with a pseudo selector like `:builtin` CSS resets could target only built in elements.

```css
:builtin {
  border: 0;
}
```

other scenarios:

form controls. with the advent of Form Associated Custom Elements, `:invalid`, `:valid`, et al may have unintended consequences if used on custom elements. With `:builtin:disabled` for example you can guarantee you're only targeting native elements.

setting `display: contents;` on all custom elements regardless of if they're defined. 

```css
:not(:builtin) {
  display: contents;
}
```

## issues with `:defined`

`:defined` is too broad since it will count both defined custom elements and built in elements and there's no way to distinguish.

`:not(:defined)` misses cases where you purposely do not define a custom element because it only exists for styling purposes.


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


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

Received on Friday, 1 November 2024 14:28:36 UTC