--- title: '::slotted()' slug: 'Web/CSS/::slotted' translation_of: 'Web/CSS/::slotted' --- <div>{{ CSSRef }}</div> <p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::slotted()</code></strong> представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>).</p> <p>Это работает только при использовании внутри CSS, помещённого в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.</p> <pre class="brush: css no-line-numbers">/* Выбирает любой элемент, помещённый в слот */ ::slotted(*) { font-weight: bold; } /* Выбирает только <span>, помещённый в слот */ ::slotted(span) { font-weight: bold; } </pre> <h2 id="Синтаксис">Синтаксис</h2> {{csssyntax}} <h2 id="Примеры">Примеры</h2> <p>Следующие фрагменты взяты из нашей демо <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">see it live also</a>).</p> <p>В этом демо мы использовали простой шаблон с тремя слотами:</p> <pre class="brush: html"><template id="person-template"> <div> <h2>Personal ID Card</h2> <slot name="person-name">NAME MISSING</slot> <ul> <li><slot name="person-age">AGE MISSING</slot></li> <li><slot name="person-occupation">OCCUPATION MISSING</slot></li> </ul> </div> </template></pre> <p>Пользовательский элемент — <code><person-details></code> — определяется следующим образом:</p> <pre class="brush: js">customElements.define('person-details', class extends HTMLElement { constructor() { super(); let template = document.getElementById('person-template'); let templateContent = template.content; const shadowRoot = this.attachShadow({mode: 'open'}); let style = document.createElement('style'); style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif; } '; shadowRoot.appendChild(style); shadowRoot.appendChild(templateContent.cloneNode(true)); } })</pre> <p>Вы увидите, что при заполнении элемента <code>style</code> содержимым мы выбираем все slotted-элементы (<code>::slotted(*)</code>) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.</p> <p>Элемент выглядит следующим образом при вставке на страницу:</p> <pre class="brush: html"><person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details></pre> <h2 id="Спецификации">Спецификации</h2> {{Specifications}} <h2 id="Browser_compatibility">Поддержка браузерами</h2> <p>{{Compat}}</p> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li><a href="/en-US/docs/Web/Web_Components">Web components</a></li> </ul>