:host-context()

Ограниченная доступность

Эта функция не относится к Baseline, так как не работает во всех широко используемых браузерах.

Псевдокласс :host-context() CSS псевдокласса позволяет стилизовать элементы внутри тени DOM по-разному, в зависимости от селектора тени (элемента, содержащего корень тени) и его предков в DOM.

Обычно элементы внутри тени DOM изолированы от внешнего DOM. Псевдокласс :host-context() позволяет «заглянуть» за пределы этой тени DOM и проверить, соответствует ли какой-либо из предков элемента определенному CSS-селектору. Например, можно применить другой цвет текста к элементам внутри корня тени, если к <body> применено псевдокласс .dark-theme.

Представьте себе: у вас есть <greenhouse> пользовательский элемент, внутри которого находится <chameleon>. В этом случае <greenhouse> — это элемент-хост тени DOM, а <chameleon> — элемент внутри тени DOM. Псевдокласс :host-context() позволяет <chameleon> изменять свой вид в зависимости от окружения <greenhouse>. Если <greenhouse> находится в солнечном месте (имеет класс «sunny-theme»), то <chameleon> становится жёлтым. Если <greenhouse> находится в тенистом месте (вместо этого применяется класс «shady-theme»), то <chameleon> становится синим.

Этот селектор проникает через все границы тени. Он будет искать тему sunny или shady, применённую непосредственно к <greenhouse> или к любому из предков хоста и предковым DOM-элементам вплоть до корня документа.

Чтобы ограничить селектор только непосредственным хостом <greenhouse> или ограничить выбор элементами DOM хоста, используйте псевдокласс :host или :host() вместо этого.

Примечание: Это не имеет эффекта, если используется вне тени DOM.

Специфичность :host-context() соответствует специфичности псевдокласса, плюс специфичность селектора, переданного в качестве аргумента функции.

Попробуйте

/* Selects a shadow root host, only if it is
   a descendant of the selector argument given */
:host-context(h1) {
  font-weight: bold;
}

/* Changes paragraph text color from black to white when
   a .dark-theme class is applied to the document body */
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}

Синтаксис

:host-context(<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(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";

Правила :host-context(h1) { font-style: italic; } и :host-context(h1):after { content: " - no links in headers!" } стилизуют экземпляр элемента <context-span> (элемент-хост тени в данном случае) внутри <h1>. Мы использовали его, чтобы показать, что пользовательский элемент не должен отображаться внутри <h1> в нашем дизайне.

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

Спецификация
Модуль CSS Scoping Level 1 # host-selector

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:host-context`	54	79	Нет	41	Нет	54	Нет	41	Нет	6.0	54

См. также

Web-компоненты
CSS :host псевдокласс
CSS :host() псевдокласс
CSS :state() псевдокласс
CSS ::slotted псевдоэлемент
HTML <template> элемент
Модуль CSS scoping

© 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-context