:has-slotted

:has-slotted — CSS-псевдокласс, который позволяет определить, содержит ли <slot> в Shadow DOM пользовательский контент (не только значение по умолчанию). Работает только внутри стилей, размещённых в Shadow DOM.

        
          
          <template id="my-element-template">  <style>    :has-slotted {      color: green;    }    :not(:has-slotted) {      color: red;    }  </style>  <slot><code>:has-slotted</code> Не работает!</slot></template><div class="container">  <my-element>    <code>:has-slotted</code> Работает!  </my-element>  <my-element></my-element></div>
          <template id="my-element-template">
  <style>
    :has-slotted {
      color: green;
    }
    :not(:has-slotted) {
      color: red;
    }
  </style>
  <slot><code>:has-slotted</code> Не работает!</slot>
</template>

<div class="container">
  <my-element>
    <code>:has-slotted</code> Работает!
  </my-element>

  <my-element></my-element>
</div>

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

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

customElements.define('my-element', MyElement);

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

        
          
          :has-slotted {  /* Стили для слотов с пользовательским контентом */}:not(:has-slotted) {  /* Стили для слотов без пользовательского контента */}
          :has-slotted {
  /* Стили для слотов с пользовательским контентом */
}

:not(:has-slotted) {
  /* Стили для слотов без пользовательского контента */
}

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

Псевдокласс применяется только к элементу <slot> внутри Shadow DOM.

:has-slotted позволяет стилизовать <slot>, если в него был передан контент из Light DOM (то есть если слот не пустой и не использует значение по умолчанию). Даже если в слот передан только пробел или текстовый узел, псевдокласс сработает.

Это удобно для создания адаптивных компонентов, которые меняют внешний вид в зависимости от наличия пользовательского контента.

💡 Работает только внутри CSS, размещённого в Shadow DOM.
💡 Если слот пустой или использует только значение по умолчанию, :has-slotted не применяется.
💡 Даже пробел или невидимый текст считаются контентом для этого псевдокласса.
💡 Для стилизации содержимого слота используйте также ::slotted.