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 |
浏览器兼容性
加载中…