files/ru/web/css/_colon_host()/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

---
title: ':host()'
slug: 'Web/CSS/:host()'
translation_of: 'Web/CSS/:host()'
---
<div>{{CSSRef}}</div>

<div></div>

<p><span class="seoSummary"><a href="/ru/docs/Web/CSS">CSS</a> функция-<a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a>  <strong><code>:host()</code></strong> выбирает shadow хоста (носителя) <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) </span>— но<span class="seoSummary"> только если селектор, переданный как параметр функции, соответствует shadow хосту.</span></p>

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

<div class="note">
<p><strong>Примечание</strong>: Псевдокласс не имеет эффекта вне shadow DOM.</p>
</div>

<pre class="brush: css; no-line-numbers">/* Выбирает хоста shadow root, только
  если он соответствует аргументу селектора */
:host(.special-custom-element) {
  font-weight: bold;
}
</pre>

<h2 id="Синтаксис">Синтаксис</h2>

{{CSSSyntax}}

<h2 id="Примеры">Примеры</h2>

<h3 id="Селективная_стилизация_shadow_хостов">Селективная стилизация shadow хостов</h3>

<p>Следующие ниже фрагменты взяты из нашего примера <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">host-selectors</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">также смотрите вживую</a>).</p>

<p>В этом примере у нас есть простой пользовательский элемент — <code>&lt;context-span&gt;</code> — который мы оборачиваем вокруг текста:</p>

<pre class="brush: html;">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>

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

<pre class="brush: js;">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; }';</pre>

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

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Browser_compatibility">Поддержка браузерами</h2>

<p>{{Compat("css.selectors.hostfunction")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/ru/docs/Web/Web_Components">Веб-компоненты</a></li>
 <li>{{CSSxRef(":host")}}</li>
 <li>{{CSSxRef(":host-context()")}}</li>
</ul>