Re: [webcomponents] Support Custom Pseudo-elements (#300)

> Are shadow-pseudos more like classes or IDs? That is, do they need to be unique, or is it ok to have multiple selected by the same name? If you can have multiple, how do we select a single one to style? Does the component author have to allow this? Can a single element expose multiple pseudo names for itself?

I imagined them as being non-unique, like classes. It's extremely likely that component authors will create elements with many children of the same type, like a `<ul>` element does today.

Though that raises the question (at least in my mind) of whether or not to allow a single HTML element to have more than one pseudo element name. To continue with the `<date-range-selector>` element example, the start and end date inputs are both inputs, and will probably want to be styled similarly, but they also might want to be styled individually. Should it be possible to select the start date field via both `::start-date` and `::field` (or whatever). Perhaps by allowing space-separated pseudo attribute name definitions: e.g. `<input pseudo="field start-date">`.

> How do we handle both a parent and child exposing themselves as pseudo-elements? Is the nesting visible or not? If yes, can you write ::foo::bar?

> (This one's important and hard.) If a component contains other components, and wants to expose some of its sub-components parts as pseudo-elements, how does it surface them? Are they selectable by default somehow (if so, how do you handle namespacing)? If not, how do you expose them? Is it apparent that they come from a sub-component, or can the parent component make them look "native"?

I think this paradigm can be simplified to just components and their sub-components, rather than thinking of it in terms of a possibly infinitely nested tree of shadow components (ala `/deep/`). As long as the component author exposes the sub-component via a custom pseudo-element, it shouldn't matter how many levels deep it's nested. For example:

```html
<x-foo>
  <!-- #shadow-root -->
    <x-bar pseudo="x-bar-item">
  <!-- /shadow-root -->
</x-foo>
```

If `<x-bar>` exposes its own `::x-baz-item` pseudo-element, then consumers of `<x-foo>` could theoretically style `::x-baz-item` pseudo-elements from a main document stylesheet via something like:

```css
x-foo::x-bar-item::x-baz-item {
  color: red;
}
```

This paradigm allows for `/deep/`-like styling without the performance implications or the exposing of component internals.

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/300#issuecomment-143941760