Shadow parts

[mrego]

Talking to @emilio about this topic, he suggested that this is quite similar to what Shadow parts do: https://w3c.github.io/csswg-drafts/css-shadow-parts-1/

With shadow parts you mark with part attribute and element you want to style from the outside. Like

<x-label id="customlabel">
  #shadow-root
    <label part="aria-labelledby">My custom label</label>
</x-label>

Then you can style that with ::part(aria-labelledby).

There are no JS API right now, but if you could do something like customlabel.part("aria-labelledby") that would expose that element and allow referencing it from the outside, maybe that could be a solution we can re-use for this problem.

[Westbrook]

Feels like this requires a deeper understanding of the element you are consuming, whereas the current approach simply says “this element gives me this” without needing to know how.

How would something like this work in a declarative fashion? JS-first and JS-only solutions should be non-starters.

Part is an interesting marking API, however. Maybe there’s a benefit to using that as opposed to auto* or reflect* in some way?

[nolanlawson]

Part is an interesting marking API, however. Maybe there’s a benefit to using that as opposed to auto* or reflect* in some way?

This makes sense to me. By leveraging part, we could avoid adding extra attributes to the part element – we would only need attributes on the shadow root / host.

E.g. for delegation:

<x-input aria-label="My label">
  <template shadowroot="open" delegates-aria-label="foo">
    <input type="text" part="foo">
  </template>
</x-input>

And reflection:

<x-label id="bar">
  <template shadowroot="open" reflects-aria-labelledby="foo">
    <label part="foo">My label</label>
  </template>
</x-label>
<input type=text aria-labelledby="bar">

This is elegant since, if a part is exposed for styling, it might be exposed for ARIA attributes as well. (E.g. the aria-activedescendant option in a listbox.)

[rniwa]

I don't think we want to reuse part for this. We should use id or a new attribute instead.

<x-label id="bar">
  <template shadowroot="open" reflects-aria-labelledby="foo">
    <label id="foo">My label</label>
  </template>
</x-label>
<input type=text aria-labelledby="bar">

[mrego]

I've create an issue about this in the other repo, as I'm trying to discuss both problems together in the other repo and then we could decide what to do.

I've some ideas at https://github.com/leobalter/cross-root-aria-delegation/blob/main/explainer.md#2-export-elements, but yeah probably we need to discuss about the right proposal.

I'd suggest moving this discussion to issue leobalter#23.