[csswg-drafts] [selectors-4] Attribute match syntax extended to cover tag selectors (#6571)

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

== [selectors-4] Attribute match syntax extended to cover tag selectors ==
Link: https://www.w3.org/TR/2018/WD-selectors-4-20181121/

With the advent of custom elements and the growing popularity of web component libraries (especially those with common prefixes), the need for a way to target a tag selector using attribute match syntax has increased.

## Use case

I have library x with a set of components: x-foo, x-bar, x-bat.  I want to write styles influence only those components on the page but I'm not sure which components are in use.

## Suggestions

In this thread, a few ideas were proposed: https://twitter.com/castastrophee/status/1433418836364210182?s=20

I'll do my best to summarize:

1. Apply attribute match syntax to selectors, i.e. `x-* { color: red; }`.
2. Apply attribute match syntax inside the `:is()` pseudo-selector i.e. `:is(x-*)`
3. Add a tag or tagName attribute that can be queried i.e., `[tag^="x-"]`

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


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

Received on Thursday, 2 September 2021 16:53:15 UTC