Re: [w3c/webcomponents] Custom pseudo-classes for host elements via shadow roots (:state) (#738)

Another idea that avoids using a ShadowRoot, which is based on the idea of callbacks for primitives from https://github.com/w3c/webcomponents/issues/187#issuecomment-388740230:

Because element states are something common to all elements, it think if would be fine to expose a public property on all elements called something like `state` (a `Set<string>` or `DOMTokenList` or similar), then allow only Custom Element code to modify it:

Re-doing my example from above:

```js
import Privates from './privates-helper'
const _ = new Privates

import glUtils from './glUtils'

class GlSphere extends HTMLElement {

  receivePrimitiveKeys(keys) {
    _(this).keys = keys
  }

  connectedCallback() {
    glUtils.whenMouseEnter(this, () => {
      this.states.add('hover', _(this).keys.elementState) // keys.elementState is unique for this instance
    })
    glUtils.whenMouseLeave(this, () => {
      this.states.remove('hover', _(this).keys.elementState)
    })
  }

}

customElements.define('gl-sphere', GlSphere)
```

-- 
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-412694539