Re: [csswg-drafts] `:predefined` pseudo-class for built-ins (i.e. not custom elements) (#11001)

Expanding the use case (from #11140) by @KonnorRogers... 

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:

* {
  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.

: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.
:builtin:invalid {
  outline: 2px solid red;
}
setting display: contents; on all custom elements regardless of if they're defined or not.
: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 define a custom element but it only is defined for attaching JS and has no presentational aspect.

-- 
GitHub Notification of comment by Westbrook
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11001#issuecomment-2452621422 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 21:33:27 UTC