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

As I was writing that last post, I thought of a possible solution to the [pseudo-class/`@apply` issue](https://github.com/w3c/webcomponents/issues/300#issuecomment-137266176). Borrowing from Sass, again, pseudo-element states could be defined in the custom property definition via the `&:pseudo-class` nesting syntax.

Here's what it could look like:

```
:root {
  --x-foo-styles: {
    color: blue;
    
    &:hover {
      background-color: yellow;
    }
    &:active {
      outline: 1px dotted;
    }
  }
}
```

This, if `@apply`-ed in a shadow `<style>` declaration, would only be applied when the pseudo-class states matched.

There are definitely some specificity/cascade issues to iron out, but if this could work, then I believe all my concerns about custom property shortcomings would be alleviated.


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