The caller should specify the state, not consume it

[lijunle]

Hi, the :state pseudo class is a very interesting idea. I have another side for CSS hacking to provide the modularized ability to the CSS, which also need a "state" for a CSS component / custom component.

IMO, the state is the input for the component for the CSS side. So, the caller should use specify the state and let the component to decide what to display according to the state. It is a layer of abstraction and make the component's CSS work as black box.

Here is my proposal syntax:

<script>
class QuestionBox extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'closed'});
    shadowRoot.innerHTML =
      `:host { background-color: white }
       :host(:state(highlight)) { background-color: yellow }
       <div><slot>Question</slot></div>`;
  }
}
customElements.define('question-box', QuestionBox);
</script>

<style>
question-box:hover { state: highlight }
</style>
<question-box>Continue?</question-box>