CustomStateSet for custom elements

[calebdwilliams]

Request for position on an emerging web specification

• WebKittens who can provide input:
• @rniwa
• @annevk

Information about the spec

• Spec Title: Exposing custom element states
• Spec URL: https://wicg.github.io/custom-state-pseudo-class/#customstateset
• Issue Tracker (if not the repository's issue tracker): Custom pseudo-classes for host elements via shadow roots (:state) WICG/webcomponents#738

Anything else we need to know

• WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=215911

Somewhat related to #47. This has been shipped in Chrome for some time.

This provides an API to allow custom element authors a way to expose internal state to the DOM for matching operations (including CSS and things like document.querySelector).

This is done via the ElementInternals.prototype.states, which is a set of custom states. A naive example would be

class FancyElement extends HTMLElement {
  constructor() {
    super();
    const internals = this.attachInternals();

    this.internals.states.add('--fancy');
  }
}

customElements.define('fancy-element', FancyElement);

This would mean that a newly-constructed instance of fancy-element would match against :--fancy.

[annevk]

In my mind this is a pretty logical extension of custom elements. Might be good to get input from @nt1m and @anttijk on the selector aspects.

[annevk]

I looked at whatwg/html#8467 today and one thing that struck is me is that maybe this can reuse DOMTokenList rather than introduce a new set-like data structure.

[rniwa]

We don't oppose this feature. There might be minor issues like using DOMTokenList and perhaps the use of -- prefix but the overall idea seems good here.

[annevk]

Let's formalize that: I suggest we add the "position: support" label 7 days from now.

[rniwa]

Perhaps we should review & give whatever feedback we want to give before we add the label?

[annevk]

Ah, I did give my feedback on DOMTokenList already. If anyone has more substantive feedback on whatwg/html#8467 or wants to review we can certainly wait a bit before adding the label.

[annevk]

About :state(token)vs:--token`:

1. Switch syntax from :state(foo) to :--foo WICG/custom-state-pseudo-class#6 renamed :state(token) to :--token.
2. This was shared in Custom pseudo-classes for host elements via shadow roots (:state) WICG/webcomponents#738 (comment) with the Web Components community and @othermaciej objected as result.
3. A long discussion was had in [css-shadow-parts] Unifying ::part() and ::--foo w3c/csswg-drafts#4900 about changing ::part(token1 token2) to something like ::--token1.token2, but apparently ::part() implementations shipped and everyone forgot about that discussion?! (The issue is still open, but that's probably an oversight?)
4. Should we rename :--token back to :state(token) so Web Components have internal consistency?

[annevk]

To follow-up here, @rniwa found a further concern: whatwg/html#8467 (comment).

[annevk]

Given that @rniwa's concern has been addressed I once again suggest we resolve this as "position: support" one week from now.