CSS селектор :host — сам кастомний елемент зсередини

CSS псевдоклас :host вибирає сам кастомний елемент зсередини його тіньових стилів.

правити

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

Зі стилів усередині тіньового DOM звичайним селектором до хоста не дотягнутися — він же в зовнішньому документі. :host — єдиний спосіб.

З аргументом він стає умовним: :host(.dark) спрацює лише тоді, коли на самому елементі є клас dark. Так компонент реагує на зовнішні класи чи атрибути.

правити

Порада

Задавай хосту display: кастомні елементи типово inline, і це майже завжди не те, чого хочеш.

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

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

Синтаксис

:host, :host(<selector>)

Переглядачі

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

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

Переглядач
	54	63	10	41	79	—

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

Переглядач
	54	54	63	10

Приклади

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

<my-card class="dark">Темна картка</my-card>
<my-card>Звичайна картка</my-card>

customElements.define('my-card', class extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' }).innerHTML = `
            <style>
                :host { display: block; padding: 1rem; border: 1px solid #ddd; }
                :host(.dark) { background: #14170f; color: #fff; }
            </style>
            <slot></slot>
        `;
    }
});