:defined

Псевдокласс :defined выбирает только те элементы, которые уже зарегистрированы в браузере как кастомные. Это позволяет стилизовать только определённые компоненты и, например, задать разные стили до и после их инициализации.

        
          
          <div class="container">  <custom-element>    <h1 slot="title">Кастомный элемент</h1>    <p slot="content">Контент появился после инициализации</p>  </custom-element>  <button id="btn">Определить элемент</button></div><template id="custom-element-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">    <slot name="title">Пустой элемент 😔</slot>    <slot name="content"></slot>  </div></template>
          <div class="container">
  <custom-element>
    <h1 slot="title">Кастомный элемент</h1>
    <p slot="content">Контент появился после инициализации</p>
  </custom-element>
  <button id="btn">Определить элемент</button>
</div>

<template id="custom-element-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">
    <slot name="title">Пустой элемент 😔</slot>
    <slot name="content"></slot>
  </div>
</template>

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

        
          
          custom-element:not(:defined) {  border-color: grey;  color: grey;  background: #222;}custom-element:defined {  background-color: wheat;  border-color: black;  color: black;}
          custom-element:not(:defined) {
  border-color: grey;
  color: grey;
  background: #222;
}

custom-element:defined {
  background-color: wheat;
  border-color: black;
  color: black;
}

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

        
          
          const btn = document.querySelector("#btn");btn.addEventListener("click", () => {  if (!customElements.get("custom-element")) {    class CustomElement extends HTMLElement {      constructor() {        super();        const shadow = this.attachShadow({ mode: "open" });        const template = document.getElementById("custom-element-template");        shadow.appendChild(template.content.cloneNode(true));      }    }    customElements.define("custom-element", CustomElement);  }  btn.remove();});
          const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  if (!customElements.get("custom-element")) {
    class CustomElement extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: "open" });
        const template = document.getElementById("custom-element-template");
        shadow.appendChild(template.content.cloneNode(true));
      }
    }
    customElements.define("custom-element", CustomElement);
  }
  btn.remove();
});

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

Псевдокласс используется как обычный селектор:

        
          
          web-component:defined {  /* стили, когда компонент зарегистрирован */}
          web-component:defined {
  /* стили, когда компонент зарегистрирован */
}

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

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

        
          
          my-box:defined:hover {  box-shadow: 0 0 10px rgba(0,0,0,0.2);}
          my-box:defined:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

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

Когда вы вставляете на страницу кастомный элемент вроде <my-widget>, он сначала появляется как неизвестный тег. До тех пор, пока скрипт не выполнится и не вызовет customElements.define('my-widget', ...), он считается неопределённым.

Псевдокласс :defined позволяет разделить стили до и после определения. Это особенно удобно для:

• Плавной загрузки интерфейса
• Предотвращения странной отрисовки до инициализации
• Анимаций и переходов после готовности

💡 Если компонент уже определён до вставки в DOM — :defined сработает сразу.
💡 Полезно использовать :not(:defined), чтобы стилизовать «заглушки» до загрузки компонентов.
💡 Работает только с кастомными тегами — вроде <my-dialog>. Не применимо к обычным HTML-тегам.
💡 Можно использовать как индикатор загрузки — например, показывать лоадер внутри неинициализированного компонента.