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.

[Westbrook]

I agree that 1a is the right path here. I'd love for the browser to give me "dev time" warnings about these sorts of things, but that's an argument for a different day. Does this feel reasonable to expand the explainer/spec with?

[keithamus]

In agreement, 1a is correct here. I agree with @Westbrook's comment; we should add a console message warning of the invalid id.

[alice]

I think this WPT test assumes option 2: https://github.com/web-platform-tests/wpt/blob/master/shadow-dom/reference-target/tentative/dom-mutation.html

Specifically, the first two cases each mutate the DOM such that the reference target is no longer valid, and the expectation is that the label match the computed text of the host.

Should we update the test?

[dandclark]

Seems like there's consensus that 1a is the best option, and the WPT has been updated to reflect this, so I recommend we close this issue. I was going to do so myself but I don't have permissions to do that in this repo. @Westbrook do you have that? If so do you agree with closing this out?

[Westbrook]

Great to see a resolution here!!