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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
---
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 notranslate">/* Выбирает хоста 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><context-span></code> — который мы оборачиваем вокруг текста:</p>
<pre class="brush: html; notranslate"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre>
<p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS-правилами:</p>
<pre class="brush: js; notranslate">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><context-span></code> (shadow хост в данном случае) в документе, которые имеют класс <code>footer</code> — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Scope', '#host-selector', ':host()')}}</td>
<td>{{Spec2('CSS Scope')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="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>
|
