From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/_colon_host()/index.html | 87 +++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/ru/web/css/_colon_host()/index.html (limited to 'files/ru/web/css/_colon_host()') diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html new file mode 100644 index 0000000000..c570b027a1 --- /dev/null +++ b/files/ru/web/css/_colon_host()/index.html @@ -0,0 +1,87 @@ +--- +title: ':host()' +slug: 'Web/CSS/:host()' +translation_of: 'Web/CSS/:host()' +--- +
{{CSSRef}}
+ +
+ +

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

+ +

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

+ +
+

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

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

Синтаксис

+ +
{{CSSSyntax}}
+ +

Примеры

+ +

Селективная стилизация 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 — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS Scope', '#host-selector', ':host()')}}{{Spec2('CSS Scope')}}Initial definition.
+ +

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

+ +

{{Compat("css.selectors.hostfunction")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf