Атрибут is

Атрибут is позволяет расширять стандартные HTML-элементы, заменяя их поведение на поведение кастомных компонентов, вместо создания полностью нового тега.

        
          
          <script>class FancyButton extends HTMLButtonElement {  constructor() {    super();    this.addEventListener('click', () => {      this.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);    });  }}customElements.define('fancy-button', FancyButton, { extends: 'button' });</script><button is="fancy-button">  Нажми меня для смены цвета!</button>
          <script>
class FancyButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      this.style.backgroundColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    });
  }
}

customElements.define('fancy-button', FancyButton, { extends: 'button' });
</script>

<button is="fancy-button">
  Нажми меня для смены цвета!
</button>

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

Атрибут is записывается как глобальный атрибут HTML-элемента:

        
          
          <element is="custom-element-name"></element>
          <element is="custom-element-name"></element>

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

Где:

• element — любой стандартный HTML-элемент
• custom-element-name — имя зарегистрированного кастомного элемента

Атрибут is работает в связке с Web Components. Он позволяет создавать кастомные встроенные элементы, которые расширяют функциональность стандартных HTML-элементов.

В отличие от автономных кастомных элементов (например, <my-button>), элементы с атрибутом is наследуют все свойства и поведение базового HTML-элемента, добавляя к ним новую функциональность.

💡 Класс кастомного элемента должен наследоваться от соответствующего HTML-элемента (например, HTMLButtonElement для кнопок).
💡 Кастомный элемент должен быть зарегистрирован с помощью customElements.define() до использования атрибута is.