:state()

Псевдокласс :state() используется для кастомных HTML-элементов и позволяет применять стили в зависимости от их пользовательского состояния.

        
          
          <toggle-box>Нажми меня</toggle-box>
          <toggle-box>Нажми меня</toggle-box>

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

        
          
          class ToggleBox extends HTMLElement {  constructor() {    super()    this._internals = this.attachInternals()    this.addEventListener('click', () => {      if (this._internals.states.has('active')) {        this._internals.states.delete('active')      } else {        this._internals.states.add('active')      }    })  }}customElements.define('toggle-box', ToggleBox)
          class ToggleBox extends HTMLElement {
  constructor() {
    super()

    this._internals = this.attachInternals()
    this.addEventListener('click', () => {
      if (this._internals.states.has('active')) {
        this._internals.states.delete('active')
      } else {
        this._internals.states.add('active')
      }
    })
  }
}

customElements.define('toggle-box', ToggleBox)

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

        
          
          toggle-box:state(active) {  color: green;}
          toggle-box:state(active) {
  color: green;
}

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

        
          
          :host(:state(<состояние>)) {  /* Стили, когда у компонента установлено состояние */}
          :host(:state(<состояние>)) {
  /* Стили, когда у компонента установлено состояние */
}

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

        
          
          // Внутри кастомного элементаconst internals = this.attachInternals();internals.states.add('active');    // Устанавливаем состояниеinternals.states.delete('active'); // Удаляем состояние
          // Внутри кастомного элемента
const internals = this.attachInternals();
internals.states.add('active');    // Устанавливаем состояние
internals.states.delete('active'); // Удаляем состояние

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

Для работы с состояниями кастомного элемента нужно получить объект internals через this.attachInternals(). Только после этого можно использовать internals.states для управления состояниями.

Селектор :state(active) применяется к компоненту, если у него установлено внутреннее состояние через CustomStateSet, доступный по свойству internals.states внутри кастомного элемента. Такие состояния не отображаются в виде атрибутов или классов и не видны в DOM. Управлять ими можно только из JavaScript. Механизм работает только для компонентов, зарегистрированных через customElements.define. Для компонентов с Shadow DOM можно использовать :host(:state()).

💡 Можно задавать несколько состояний и применять к ним разные стили.
💡 Используйте :state() для логики типа «открыт/закрыт», «активен/неактивен» без необходимости менять классы или атрибуты.