:host
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
CSS функция-псевдокласс :host() выбирает shadow хоста (носителя) shadow DOM-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.
Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа :host-context().
Примечание: Псевдокласс не имеет эффекта вне shadow DOM.
/* Выбирает хоста shadow root, только если он соответствует аргументу селектора */ :host(.special-custom-element) { font-weight: bold; } Синтаксис
Error: could not find syntax for this itemПримеры
Селективная стилизация shadow хостов
Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).
В этом примере у нас есть простой пользовательский элемент — <context-span> — который мы оборачиваем вокруг текста:
<h1> Host selectors <a href="#"><context-span>example</context-span></a> </h1> Внутри конструктора элемента мы создаём элементы style и span, заполняем span контентом пользовательского элемента и заполняем элемент style CSS-правилами:
let style = document.createElement("style"); let span = document.createElement("span"); span.textContent = this.textContent; const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(style); shadowRoot.appendChild(span); style.textContent = "span:hover { text-decoration: underline; }" + ":host-context(h1) { font-style: italic; }" + ':host-context(h1):after { content: " - no links in headers!" }' + ":host-context(article, aside) { color: gray; }" + ":host(.footer) { color : red; }" + ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }"; Правило :host(.footer) { color : red; } стилизует все экземпляры элемента <context-span> (shadow хост в данном случае) в документе, которые имеют класс footer — мы использовали его, чтобы дать экземплярам элемента внутри <footer> особый цвет.
Спецификации
| Specification |
|---|
| CSS Scoping Module Level 1 # host-selector |