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

Not sure if this is the right place, but as a custom elements author, I'd like a way to define toggle `:hover` for custom elements.

What I mean, is for special elements like `<a-sphere>` from [A-Frame](https://aframe.io), it'd be great to be able to define CSS like

```css
a-sphere {
  --radius: 50%;
}
a-sphere:hover {
  --radius: 60%;
}
```

This is, of course, assuming A-Frame supported a `--radius` custom property, which it currently doesn't. I'm just depicting what could be possible.

A-Frame elements render to WebGL, and such a `:hover` feature would need to be implemented with JS inside the Custom Element definition.

It seems like this is a little different than what `:part()` would be used for. I don't understand how `:part()` relates to `:hover` other than if I detect a hover event inside my component's shadow root then I can use JS to add a `part="input-hover"` attribute to the root's input element, for example.

Unfortunately, this relies on DOM-based events, and I don't see how this can be done with elements that render to WebGL and that use the `display:none` hack to hide their actual DOM content (because we don't want to see a rectangle for the `<a-sphere>` in A-Frame, we just want to see a sphere in WebGL, so `display:none` prevents the actual DOM rendering).

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/300#issuecomment-366818379