is HTML атрибут - розширення вбудованих елементів

Глобальний атрибут is використовується для визначення користувацького вбудованого елемента, дозволяючи авторам розширювати існуючі HTML-елементи новою користувацькою функціональністю.

Це відрізняється від автономних користувацьких елементів, які є абсолютно новими елементами. При визначенні користувацького вбудованого елемента атрибут is вказує ім'я користувацького елемента, тоді як сам елемент зберігає локальне ім'я HTML-елемента, який він розширює (наприклад, <button is="plastic-button">). Це дозволяє користувацькому елементу успадковувати семантику та поведінку розширеного HTML-елемента.

<button is="my-button">Натисни мене</button>

<button is="fancy-button">Fancy Button</button>

<script>
  class FancyButton extends HTMLButtonElement {
    constructor() {
      super();
      this.addEventListener('click', () => {
        alert('Fancy button clicked!');
      });
      this.style.backgroundColor = 'purple';
      this.style.color = 'white';
      this.style.padding = '10px 20px';
      this.style.border = 'none';
      this.style.borderRadius = '5px';
      this.style.cursor = 'pointer';
    }
  }
  customElements.define('fancy-button', FancyButton, { extends: 'button' });
</script>