ShadowRoot: delegatesFocus-Eigenschaft

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

Wenn true, wird beim Klicken auf einen nicht fokussierbaren Teil des Shadow DOMs oder beim Aufrufen von .focus() auf das Host-Element der erste fokussierbare Teil innerhalb des Shadow DOMs des Hosts fokussiert, und der Shadow-Host erhält jegliche verfügbare :focus-Stilgestaltung.

Fokus ist von besonderer Bedeutung für Tastaturnutzer (einschließlich derjenigen, die Bildschirmlesegeräte verwenden). Das Standardverhalten von delegatesFocus ist, das erste fokussierbare Element zu fokussieren – was unerwünscht sein kann, wenn dieses Element nicht Teil der Tabulatorreihenfolge sein soll (zum Beispiel ein Element mit tabindex="-1"), oder wenn ein wichtigeres fokussierbares Element anfänglich den Fokus erhalten sollte (zum Beispiel das erste Textfeld statt des "Schließen"-Buttons davor). In solchen Fällen kann das autofocus-Attribut auf dem Element angegeben werden, das den anfänglichen Fokus erhalten soll. Verwenden Sie das autofocus-Attribut mit Vorsicht, da es Barrierefreiheitsprobleme verursachen kann, z. B. das Übergehen wichtiger Inhalte, die unbemerkt bleiben, weil der Fokus auf ein Element später in der DOM-Reihenfolge 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;