ShadowRoot: свойство delegatesFocus

Свойство delegatesFocus только для чтения интерфейса ShadowRoot возвращает true если корень тени делегирует фокус, и false в противном случае.

Если true, при нажатии на недоступную для фокусировки часть DOM тени или при вызове .focus() на элементе-хосте, первому доступному элементу внутри DOM тени хоста присваивается фокус, и хосту тени присваивается доступное :focus стилирование.

Фокус имеет особое значение для пользователей клавиатуры (включая тех, кто использует средства чтения экрана). delegatesFocus по умолчанию фокусируется на первом доступном элементе — что может быть нежелательно, если этот элемент не должен быть частью порядка переключения (например, элемент с tabindex="-1"), или если более «важный» доступный элемент должен получить первоначальный фокус (например, первое текстовое поле, а не кнопка «закрыть», которая предшествует ему). В таких случаях, на элементе, который должен получить первоначальный фокус, можно указать атрибут autofocus. Используйте атрибут autofocus с осторожностью, так как это может привести к проблемам с доступностью, таким как обход важного содержимого, которое может быть незамеченным из-за фокусировки на элементе, расположенном позже в порядке DOM.

Значение свойства изначально устанавливается с помощью свойства delegatesFocus объекта, переданного в Element.attachShadow(), или с помощью атрибута shadowrootdelegatesfocus элемента <template> при создании корня тени декларативным способом.

true если корень тени делегирует фокус, и false в противном случае.

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

// ...

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

Пример Декларативный Shadow DOM с делегированным фокусом в документации <template> демонстрирует эффекты делегирования фокуса.