JavaScript ShadowRoot.host — елемент-носій тіньового дерева

Властивість host повертає елемент, до якого прикріплена тінь — той, усередині якого вона живе.

правити

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

Це єдиний вихід із тіньового дерева назовні. Усередині тіні звичайне піднімання по parentElement доходить до кореня — і зупиняється, бо тінь не має батька у звичайному сенсі.

host перестрибує цю межу: з нього вже можна читати атрибути компонента, знаходити його місце на сторінці й підніматись далі вгору по документу.

правити

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

Переглядачі

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

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

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

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

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

Приклади

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

class MyWidget extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = '<p></p>';

        // з тіні назовні — до самого елемента
        const title = shadow.host.getAttribute('title');
        shadow.querySelector('p').textContent = title;

        console.log(shadow.host === this); // true
    }
}

customElements.define('my-widget', MyWidget);