[selectors] Partial element 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. Add support for wildcard syntax with selectors, i.e. x-* { color: red; }.
2. Add support for wildcard 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-"]

Start with the linked Selectors Level 4 draft and the discussion linked in this issue; compare the three proposed syntaxes and their implications for custom-element names. Done means the CSS Working Group has selected and specified a supported approach, with the relevant draft text updated.