Reference Target: How to handle invalid ID references?

[behowell]

This question was brought up by @Westbrook in #1067 (review):

Is there a related section that points out what happens to references when referenceTarget doesn't resolve an element? Maybe the practicalities of "just like when there is no element of that ID" are assumed. However, the idea that there is an element, but it's "nothing", in certain cases, could be surprising.

It's not yet spelled out in the Reference Target Explainer. An example of this situation is when the shadow root's reference target is invalid; in this case INVALID_ID. What is the <input>'s aria-activedescendant in this case?

<input
  role="combobox"
  aria-activedescendant="fancy-listbox"
/>
<fancy-listbox id="fancy-listbox">
  <template
    shadowrootmode="closed"
    shadowrootreferencetarget="INVALID_ID"
  >
    <div id="real-listbox" role="listbox">
      <div id="option-1" role="option">Option 1</div>
      <div id="option-2" role="option">Option 2</div>
    </div>
  </template>
</fancy-listbox>

There are two options when a shadow root's referenceTarget refers to an invalid ID (no element with the given ID exists in the shadow tree):

1. The reference is invalid. Act as if the attribute refers to an element that doesn't exist.
   • In the example above, that would mean the aria-activedescendant="fancy-listbox" attribute is invalid, and there is no active descendant.
   • This seems to better follow the component author's intent. The missing element might be added later, and it could be unexpected for references to target the host in the meantime.
2. The reference applies to the host. Act as if there is no referenceTarget set.
   • In the example above, the fancy-listbox itself would be the active descendant.
   • This avoids confusion about why a seemingly valid ID reference isn't working to resolve to an element.

--

A related question: If we go with Option 1 (the reference target is invalid), then what does a JS attribute targeting the host element return?

E.g.:

<label id="example-label" for="fancy-input">Example</label>
<fancy-input id="fancy-input">
  <template
    shadowrootmode="closed"
    shadowrootreferencetarget="real-input"
  >
    <div>
      <!-- In this example, there is nothing with the ID "real-input" in the shadow tree -->
    </div>
  </template>
</fancy-input>

<script>
const label = document.getElementById('example-label');
console.log(label.control); // << What does this log?

The options here are:
1a. The attribute returns null because the reference is invalid and doesn't resolve to a real element.
1b. The attribute returns the <fancy-input> like it would if the reference target were valid.

[behowell]

I think Option 1a seems like the best choice. The reference is invalid, and any JS attribute that resolves the reference target returns null to reflect that case.