Skip to content

Reference Target, level 2 #1068

@Westbrook

Description

@Westbrook

I don't think it needs to block initial testing/implementation of Reference Target, by any means, but I would like to see a conversation around non-reference attributes and whether they can be passed via this pattern.

Starting specifically with accessibility attributes, it would seem that things like role, aria-label, and aria-description, et al deserve to be passed to the Reference Target the same way the ID reference based relations are passed. See w3c/aria#2303 for use cases.

In that way, we won't see authors asking the question of why this:

<label for="x-checkbox">I'm a checkbox</label>
<x-checkbox id="x-checkbox">
  <template
    shadowrootmode="open"
    shadowrootreferencetarget="real-input"
  >
    <input type="checkbox" id="real-input">
  </template>
</x-checkbox>

Would work differently than this:

<x-checkbox aria-label="I'm a checkbox">
  <template
    shadowrootmode="open"
    shadowrootreferencetarget="real-input"
  >
    <input type="checkbox" id="real-input">
  </template>
</x-checkbox>

In both cases a label applied outside of the shadow root is pointed to an element with a Reference Target. Both types of labels should likely behave similarly.

This, of course, does beg the harrowing question of "when does it stop?". Many authors wonder how to mirror ALL attributes down into a child. In this way, an author could make a <x-input> and have all of the attributes be passed down to a <input> internal of the shadow root. Is there a way to know what attributes are unique to the target of a reference? aria- attributes seem like a no brainer due to the idea that you've established a Reference Target to begin with. However, could the delta of attributes on the Reference Target that are not on HTMLElement in some way to assumed or triggered to pass as well?

This would make things like <meter>, which has unique attribtues like min, max, low, high, optimum, and value, much easier to customize with a custom elements:

<x-meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
    at 50/100
    <template
      shadowrootmode="open"
      shadowrootreferencetarget="meter"
    >
      <styles>/* ... */</styles>
      <custom-stuff></custom-stuff>
      <meter" id="meter"><meter>
    </template>
</x-meter>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions