::slotted()

Псевдоэлемент ::slotted() позволяет стилизовать вставленные во внешний слот элементы внутри Shadow DOM компонента.

        
          
          <template id="card-template">  <style>    ::slotted(h1) {      font-weight: bold;      color: #FF8630;      margin-bottom: 8px;      font-size: 2rem;    }    ::slotted(p) {      font-size: 1.2rem;    }  </style>  <div class="card" part="box">    <slot name="title">Пустая карточка 😔</slot>    <slot name="content"></slot>  </div></template><my-card>  <h1 slot="title">Крутая карточка 😎</h1>  <p slot="content">Контент очень крутой карточки</p></my-card><my-card></my-card>
          <template id="card-template">
  <style>
    ::slotted(h1) {
      font-weight: bold;
      color: #FF8630;
      margin-bottom: 8px;
      font-size: 2rem;
    }

    ::slotted(p) {
      font-size: 1.2rem;
    }
  </style>
  <div class="card" part="box">
    <slot name="title">Пустая карточка 😔</slot>
    <slot name="content"></slot>
  </div>
</template>

<my-card>
  <h1 slot="title">Крутая карточка 😎</h1>
  <p slot="content">Контент очень крутой карточки</p>
</my-card>
<my-card></my-card>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          class MyCard extends HTMLElement {  constructor() {    super()    const shadow = this.attachShadow({ mode: 'open' })    const template = document.getElementById('card-template')    const content = template.content.cloneNode(true)    shadow.appendChild(content)  }}customElements.define('my-card', MyCard)
          class MyCard extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    const template = document.getElementById('card-template')
    const content = template.content.cloneNode(true)
    shadow.appendChild(content)
  }
}
customElements.define('my-card', MyCard)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдоэлемент ::slotted() пишется внутри Shadow DOM, и работает только для элементов, переданных в <slot> из внешнего DOM:

        
          
          ::slotted(h2) {  color: red;}
          ::slotted(h2) {
  color: red;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно указывать тег, класс, атрибуты и другие селекторы:

        
          
          ::slotted(.highlighted) {  background: yellow;}
          ::slotted(.highlighted) {
  background: yellow;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Нельзя стилизовать вложенные элементы:

        
          
          /* НЕ РАБОТАЕТ! */::slotted(div span) {  color: red;}
          /* НЕ РАБОТАЕТ! */
::slotted(div span) {
  color: red;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Shadow DOM создаёт изоляцию: стили внутри компонента не влияют на внешний DOM, и наоборот. Слот (<slot>) — способ «вставить» внешний контент внутрь компонента. ::slotted() — единственный способ внутри Shadow DOM обратиться к внешнему содержимому, пришедшему через слот.

💡 Работает только внутри Shadow DOM. В обычном CSS — не сработает.
💡 ::slotted() работает только с прямыми потомками слота. Вложенные теги — игнорируются.
💡 ::slotted() имеет более низкую специфичность по сравнению с внешними стилями, вне зависимости от селектора.
💡 Если слот именованный (<slot name="title">), ::slotted() тоже работает:

        
          
          ::slotted([slot="title"]) {  font-weight: bold;}
          ::slotted([slot="title"]) {
  font-weight: bold;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать