The delegatesFocus read-only property of the ShadowRoot interface returns true if the shadow root delegates focus, and false otherwise.

If true, when a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.

The property value is set using the delegatesFocus property of the object passed to Element.attachShadow()).


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

// ...

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


DOM Standard
# shadowroot-delegates-focus

Browser compatibility

BCD tables only load in the browser