Custom states & default ARIA for slotted built-ins

[LeaVerou]

What problem are you trying to solve?

Web components often need to slot native elements, for example:

• A <button-group> component slotting <button> elements
• An <x-accordion> or <sidebar-panel> component slotting <details>
• Carousels, tab panels, etc. often need to slot existing block elements
• A <check-list> slotting a <li> (see Allow any element to be the child of a custom element (parser weirdness permitting) #10722)
• A <checkbox-group> slotting a <label>
• A <x-dropdown> slotting an <option>
• A <tab-group> or carousel component using arbitrary block elements as tab panels
• etc

It is common to need to expose state about these slotted children to CSS (:state()), and in some cases to specify ARIA roles without spawning attributes (which is seen as an antipattern). However, given that ElementInternals is only available to custom elements, there is no states, and no way to set default ARIA, so this cannot be done.

What solutions exist today?

Components invent their own children instead of using built-ins, simply to set an ARIA attribute or to use custom states, then they have to mirror their API (and lose any heuristics about built-in elements that exist in lots of tooling or even the UA itself).

How would you solve it?

A way to attach a reduced ElementInternals to any element (just like a shadow tree can be attached to built-ins too)?

Anything else?

No response

[annevk]

I think this would end up being weird as the ElementInternals would end up having to be public API, which attributes are too. So there's not really a difference except in invocation syntax.

If you want custom API using custom elements is really the best solution.