JavaScript ShadowRoot.activeElement — елемент у фокусі всередині тіні

Властивість activeElement повертає елемент у фокусі всередині тіні.

правити

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

Тінь ховає свій вміст і від фокуса теж. document.activeElement покаже лише сам компонент — не поле вводу всередині нього. Це називають «перепризначенням» (retargeting): назовні тінь виглядає монолітом.

Щоб дізнатись, що саме у фокусі, треба питати саму тінь.

Тому універсальний пошук елемента у фокусі — це рекурсія: спускатись у shadowRoot, доки він є.

правити

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

Переглядачі

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

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

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

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

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

Приклади

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

const shadow = {
    activeElement: 'значення'
};

// document бачить лише компонент, а не поле всередині
console.log(document.activeElement.tagName); // 'MY-WIDGET'

// а тінь знає правду
console.log(shadow.activeElement.tagName);   // 'INPUT'

// універсально — спускаємось крізь усі тіні
function deepActiveElement() {
    let element = document.activeElement;

    while (element?.shadowRoot?.activeElement) {
        element = element.shadowRoot.activeElement;
    }

    return element;
}