[w3c/webcomponents] A way to implement :hover, :active, etc, for custom elements. (#738)

Some elements like the ones in [A-Frame](https://aframe.io) render to WebGL. They are styled with `display:none` so that DOM rendering is disabled, and the state of the custom elements are used in drawing to a canvas webgl context.

It'd be great if there was a way to define when a custom element has a `:hover`/`:active`/etc state so that we can do something like the following with custom elements that render in special ways:

```html
<my-sphere position="30 30 30">
</my-sphere>
<style>
  my-sphere { --radius: 30px }
  my-sphere:hover { --radius: 40px }
</style>
```

There's currently no way to make this happen (apart from parsing the CSS). Perhaps it'd be great to have an API that makes it easy to define when `:hover` state is applied to a custom element.

The implementation of the element could then use a ray tracer to detect mouse hover in the WebGL context, then turn on or off the `:hover` state, allowing the user of the custom elements to easily style certain things like the radius of a sphere.

-- 
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/738