ShadowRoot: delegatesFocus-Eigenschaft

Die schreibgeschützte Eigenschaft delegatesFocus des ShadowRoot-Interfaces gibt true zurück, wenn der Shadow Root den Fokus delegiert, und false, andernfalls.

Wenn true, erhält der erste fokussierbare Teil den Fokus, wenn ein nicht fokussierbarer Teil des Shadow DOMs angeklickt wird oder .focus() auf das Host-Element aufgerufen wird, und der Shadow Host erhält das verfügbare :focus-Styling.

Der Fokus ist besonders wichtig für Tastaturbenutzer (einschließlich derjenigen, die Bildschirmleseprogramme verwenden). Das Standardverhalten von delegatesFocus besteht darin, das erste fokussierbare Element zu fokussieren — dies kann unerwünscht sein, wenn dieses Element nicht Teil der Tab-Reihenfolge sein soll (zum Beispiel ein Element mit tabindex="-1"), oder wenn ein 'wichtigeres' fokussierbares Element den ersten Fokus erhalten sollte (zum Beispiel das erste Textfeld statt der 'Schließen'-Schaltfläche, die ihm vorausgeht). In solchen Fällen kann das autofocus-Attribut auf dem Element angegeben werden, das den ersten Fokus erhalten soll. Verwenden Sie das autofocus-Attribut mit Vorsicht, da es Barrierefreiheitsprobleme einführen kann, wie z.B. das Überspringen wichtiger Inhalte, die möglicherweise unbemerkt bleiben, da der Fokus auf ein später in der DOM-Reihenfolge liegendes Element gesetzt wird.

Der Eigenschaftswert wird ursprünglich mit der delegatesFocus-Eigenschaft des Objekts gesetzt, das an Element.attachShadow() übergeben wird, oder mit dem shadowrootdelegatesfocus-Attribut des <template>-Elements, wenn ein Shadow Root deklarativ erstellt wird.

let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;

// ...

// Does it delegate focus?
let hostElem = shadow.delegatesFocus;