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

I think this is a good idea. I'm not sure on the exact design. @TabAtkins suggests putting it on shadow root, and in the past we've coupled some features there (such as custom styles, and in the future custom a11y semantics). To me putting it on custom elements makes the most sense, but I'm not sure on the design. And you could also imagine a design that works on all elements.

Here's some more concrete strawpeople:

### Works on all elements

```js
element.states.add("foo");
element.states.add("bar");

element.matches(":state(foo)"); // or maybe ":--foo" or similar
```

Here `element.states` is a `DOMTokenList` as @TabAtkins suggests. Although it's a bit unusual to have a DOMTokenList that isn't connected to a visible content attribute, hrm.

### Works on custom elements

```js
customElements.define("x-tag", class XTag extends HTMLElement {
  getStatesCallback() {
    const states = ["foo"];
    if (this._isBar) {
      states.push("bar");
    }
    return states;
  }
});
```

This seems not great because it'd require calling into `getStatesCallback()` all the time.

### Works on shadow roots

```js
element.shadowRoot.states.add("foo");
element.shadowRoot.states.add("bar");

element.matches(":state(foo)"); // or maybe ":--foo" or similar
```

I guess in the end this ends up being pretty clean...

-- 
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#issuecomment-367459656