delegation

index.html

<!-- delegation -->
<x-input aria-labelledby="foo">
  #shadow-root
    <input type=text autoarialabelledby> <!-- delegates aria-labelledby to the host -->
</x-input>

<!-- reflection -->
<x-label id="foo">
  #shadow-root reflects=ariaLabelledBy
    <label reflectsAriaLabelledBy> <!-- reflects its "id" upward, in a sense -->
</x-label>

<x-listbox id="foo">
  #shadow-root reflects=ariaControls,ariaActiveDescendant
    <div role="listbox" reflectsAriaControls>
      <div role="option">One</div>
      <div role="option" reflectsAriaActiveDescendant>Two</div>
      <div role="option">Three</div>
    </div>
</x-listbox>

<!-- delegation -->
<x-input aria-labelledby="foo">
  #shadow-root
    <input type=text autoarialabelledby> <!-- delegates aria-labelledby to the host -->
</x-input>

<!-- reflection -->
<x-label id="foo">
  #shadow-root reflects=ariaLabelledBy
    <label reflectsAriaLabelledBy>content</label>
</x-label>

<label id="foo">content</label>