ShadowRoot: delegatesFocus 屬性
ShadowRoot 介面的只讀屬性 delegatesFocus 返回一個布林值，如果 shadow root 委託焦點，則為 true，否則為 false。
如果設定為 true，當點選 shadow DOM 的不可聚焦部分，或在宿主元素上呼叫 .focus() 時，宿主 shadow DOM 內的第一個可聚焦部分將獲得焦點，並且 shadow 宿主將獲得任何可用的 :focus 樣式。
焦點對於鍵盤使用者（包括螢幕閱讀器使用者）尤其重要。delegatesFocus 的預設行為是將焦點設定到第一個可聚焦元素上——如果該元素不應成為製表順序的一部分（例如，具有 tabindex="-1" 的元素），或者如果一個更“重要”的可聚焦元素應獲得初始焦點（例如，第一個文字欄位而不是它前面的“關閉”按鈕），這可能是不希望的。在這種情況下，可以在應獲得初始焦點的元素上指定 autofocus 屬性。請謹慎使用 autofocus 屬性，因為它可能引入可訪問性問題，例如繞過重要內容，這些內容可能因為焦點設定在 DOM 順序靠後的元素上而未被注意到。
該屬性值最初是透過傳遞給 Element.attachShadow() 的物件的 delegatesFocus 屬性設定的，或者在以宣告方式建立 shadow root 時，透過 <template> 元素的 shadowrootdelegatesfocus 屬性設定的。
值
如果 shadow root 委託焦點，則為 true，否則為 false。
示例
js
const customElem = document.querySelector("my-shadow-dom-element");
const shadow = customElem.shadowRoot;
// …
// Does it delegate focus?
const hostElem = shadow.delegatesFocus;
<template> 文件中的“帶有委託焦點的宣告式 Shadow DOM”示例演示了委託焦點的影響。
規範
| 規範 |
|---|
| DOM # shadowroot-delegates-focus |
瀏覽器相容性
載入中…