:host

Baseline Широко распространённый

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

Псевдокласс :host CSS псевдокласса выбирает хост тени shadow DOM, содержащий CSS, в котором он используется — другими словами, это позволяет выбрать пользовательский элемент изнутри его shadow DOM.

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

Попробуйте

/* Selects a shadow root host */
:host {
  font-weight: bold;
}

Синтаксис

:host {
  /* ... */
}

Примеры

Стиль хоста тени

Следующие фрагменты взяты из нашего примера 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 { background: rgb(0 0 0 / 10%); padding: 2px 5px; } стилизует все экземпляры элемента <context-span> (хост тени в данном случае) в документе.

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:host`	54	79	63	41	10	54	63	41	10	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