:host()

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Функция :host() CSS псевдокласса выбирает хост-тени DOM, содержащий CSS, в котором она используется (так что вы можете выбрать пользовательский элемент изнутри его DOM-тени) — но только если выбранный селектор, переданный в качестве параметра функции, соответствует хосту тени. :host() не оказывает никакого влияния, когда используется вне DOM-тени.

Наиболее очевидное применение этого — назначение имени класса только для определённых экземпляров пользовательских элементов и затем включение соответствующего селектора класса в качестве аргумента функции. Вы не можете использовать это с выражением селектора потомков для выбора только экземпляров пользовательского элемента, которые находятся внутри конкретного предка. Это задача :host-context().

Примечание: В то время как другие функциональные псевдоклассы, такие как :is() и :not(), принимают список селекторов в качестве параметров, :host() принимает один составной селектор в качестве параметра. Кроме того, в то время как :is() и :not() учитывают только специфичность своего аргумента, специфичность :host() представляет собой как специфичность псевдокласса, так и специфичность его аргумента.

Попробуйте

/* Selects a shadow root host, only if it is
   matched by the selector argument */
:host(.special-custom-element) {
  font-weight: bold;
}

Синтаксис

:host(<compound-selector>) {
  /* ... */
}

Примеры

Выборочное стилирование хостов тени

Следующие фрагменты взяты из нашего примера host-selectors (посмотреть онлайн тоже).

В этом примере у нас есть пользовательский элемент — <context-span> — которым можно обернуть текст:

<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

Внутри конструктора элемента мы создаём style и span элементы, заполняем span содержимым пользовательского элемента и заполняем элемент style некоторыми правилами CSS:

const style = document.createElement("style");
const 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: rgb(0 0 0 / 10%); padding: 2px 5px; }";

Правило :host(.footer) { color : red; } стилизует все экземпляры элемента <context-span> (хост тени в этом случае) в документе, у которых установлен класс footer — мы использовали его, чтобы придать экземплярам элемента внутри <footer> особый цвет.

Спецификации

Спецификация
CSS Scoping Module Level 1 # host-selector

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`:host_function`	54	79	63	41	10 Некоторые CSS-селекторы не работают (:host > .local-child), и стилизация вложенного содержимого (::slotted) имеет баги.	54	63	41	10 Некоторые CSS-селекторы не работают (:host > .local-child), и стилизация вложенного содержимого (::slotted) имеет баги.	6.0	54

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function