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

@tabatkins I'm aware of the `@apply` rule (it was discussed in the [issue that prompted this proposal](https://github.com/w3c/webcomponents/issues/298)), and I think in general using `@apply` with custom properties is the best way to style third-party elements.

However, I brought up several use-cases in the proposal  that I think are legitimate and that I don't think the `@apply` rule can handle (unless I'm misunderstanding part of its functionality).

You said:

> Pseudo-elements expose an element for arbitrary styling, so that's useful. The `@apply` rule also does that [...]

Can you go into more detail here? How would the `@apply` rule handle the styling of an input element only in the `:focus`, `:enabled`, and `:out-of-range` state? As far as I can tell, the only way is for the element author to hard-code that selector in the element's shadow styles. Something like:

```css
input {
  /* normal input styles */
  @apply --date-range-selector-inputs;
}
input:focus:enabled:out-of-range {
  /* input styles for the focus, enabled, and out-of-range states */
  @apply --date-range-selector-inputs-focused-enabled-out-of-range;
}
```

It seems unreasonable for component authors to have to anticipate and hard-code every element state their users may ever want to style. Exposing the element itself is much simpler and still maintains the privacy of other element in the component (unlike `::shadow`/`>>>`).

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