ShadowRoot: delegatesFocus-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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.

Wert

true, wenn das Shadow-Root den Fokus delegiert, und false andernfalls.

Beispiele

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

// ...

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

Das Beispiel Deklaratives Shadow DOM mit delegiertem Fokus in der <template>-Dokumentation demonstriert die Effekte der Fokusdelegierung.

Spezifikationen

Specification
DOM
# shadowroot-delegates-focus

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
delegatesFocus

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support