:host()

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

Заметка: Псевдокласс не имеет эффекта вне shadow DOM.

/* Выбирает хоста shadow root, только 
  если он соответствует аргументу селектора */ 
:host(.special-custom-element) {
  font-weight: bold;
}

Синтаксис

:host( <compound-selector-list> )

где
<compound-selector-list> = <compound-selector>#

где
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

где
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

где
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

где
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Примеры

Селективная стилизация 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> особый цвет.

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

Спецификация Статус Комментарий
CSS Scoping Module Level 1
Определение ':host()' в этой спецификации.
Рабочий черновик Initial definition.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:host()Chrome Полная поддержка 54Edge Полная поддержка 79Firefox Полная поддержка 63
Полная поддержка 63
Нет поддержки 61 — 63
Отключено
Отключено From version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 41Safari Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.
WebView Android Полная поддержка 54Chrome Android Полная поддержка 54Firefox Android Полная поддержка 63
Полная поддержка 63
Нет поддержки 61 — 63
Отключено
Отключено From version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 41Safari iOS Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.
Samsung Internet Android Полная поддержка 6.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

Смотрите также