1 files changed, 73 insertions, 0 deletions
diff --git a/files/ru/web/css/_colon_host_function/index.html b/files/ru/web/css/_colon_host_function/index.html
new file mode 100644
index 0000000000..b23c69d180
--- /dev/null
+++ b/files/ru/web/css/_colon_host_function/index.html
@@ -0,0 +1,73 @@
+---
+title: ':host()'
+slug: Web/CSS/:host_function
+translation_of: Web/CSS/:host()
+original_slug: Web/CSS/:host()
+---
+<div>{{CSSRef}}</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}}</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>