Benutzerdefinierte Elemente und Zugänglichkeit

Ich möchte ein Listenfeld-Widget mit den aktuellen Webkomponenten-Spezifikationen implementieren. Darüber hinaus sollte die resultierende Listbox dem ARIA-Standard entsprechen. Die Instanziierung des Listbox-Widgets sollte so einfach sein wie:

Aus Gründen der Sauberkeit und Verkapselung sollte alles andere im Schattenbereich dargestellt werden. Um dieses Widget zu implementieren, sind zwei benutzerdefinierte Elemente, <x-listbox> und <x-option> , registriert. Das Element der obersten Ebene des Schattenbereichs von <x-listbox> ist ein <div> , das die Attribute role=listbox und aria-activedescendent für die Barrierefreiheit enthält (ich möchte diese Attribute nicht für das Element <x-listbox> , da es sich um eine Implementierung handelt Details.)

Damit aria-activedescendent funktioniert, benötigt man IDs auf den Optionselementen. Das direkte Platzieren von IDs auf die Elemente <x-option> funktioniert nicht aus zwei Gründen: Erstens würde es den ID-Namespace des Dokuments verschmutzen, das das Listbox-Widget verwendet. Zweitens und noch wichtiger ist, dass IDs nicht über Schattengrenzen hinweg funktionieren (was ein Ziel des Schatten-Doms ist), so dass die IDs der Optionen im selben Schatten wie das <div> mit dem Attribut aria-activedescendent leben müssen.

Eine Lösung wäre, jedes <x-option> , das als Inhalt innerhalb der Schattendomäne von <x-listbox> gerendert wird, mit einem anderen <div> (das zu diesem Schattendom gehört) zu umgeben, auf das eine ID gesetzt werden kann.

Meine Frage ist: Ist das der richtige Weg zu gehen und wie dies mit dem benutzerdefinierten Element und Shadow-dom-Web-API zu implementieren?