JavaScript ShadowRoot.delegatesFocus — передача фокуса всередину

Властивість delegatesFocus каже, чи передає компонент фокус першому елементу всередині тіні.

правити

Загальний опис

Без неї виходить неприємність із доступністю: користувач тисне Tab, фокус потрапляє на компонент — і зупиняється на його оболонці, а не на полі вводу всередині. Клавіатура перестає працювати.

З delegatesFocus: true фокус провалюється всередину, на перший придатний елемент. І клік по будь-якій частині компонента теж ставить фокус у поле — як і має бути.

Задається один раз, при створенні тіні; змінити її потім не можна — властивість лише читається.

правити

Порада

Робиш компонент із полем вводу всередині тіні — ставте delegatesFocus: true одразу. Без цього він буде недоступним із клавіатури.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
delegatesFocus	53+	63+	10+	40+	79+	-

Підтримка: мобільні переглядачі

Переглядач
delegatesFocus	53+	yes	yes	10+

Приклади

+ запропонувати свій приклад у пісочниці

class SearchBox extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({
            mode: 'open',
            // без цього Tab зупиниться на оболонці
            delegatesFocus: true,
        });

        shadow.innerHTML = '<input type="search">';

        console.log(shadow.delegatesFocus); // true — лише читається
    }
}

customElements.define('search-box', SearchBox);