Кастомні елементи

Ми можемо створювати власні HTML-елементи, описані нашим класом, з власними методами та властивостями, подіями тощо.

Після визначення кастомного елемента ми можемо використовувати його нарівні з вбудованими HTML-елементами.

Це чудово, оскільки словник HTML багатий, але не нескінченний. У ньому немає тегів <easy-tabs>, <sliding-carousel>, <beautiful-upload>… Просто придумайте будь-який інший тег, який нам може знадобитися.

Ми можемо визначити їх за допомогою спеціального класу, а потім використовувати так, ніби вони завжди були частиною HTML.

Існує два типи кастомних елементів:

1. Автономні кастомні елементи – “абсолютно нові” елементи, що розширюють абстрактний клас HTMLElement.
2. Кастомізовані вбудовані елементи – розширення вбудованих елементів, наприклад, кастомізованої кнопки, на основі HTMLButtonElement тощо.

Спочатку ми розглянемо автономні елементи, а потім перейдемо до кастомізованих вбудованих.

Щоб створити кастомний елемент, нам потрібно вказати браузеру кілька деталей про нього: як його показувати, що робити, коли елемент додається або видаляється зі сторінки тощо.

Це робиться шляхом створення класу зі спеціальними методами. Це легко, оскільки методів небагато, і всі вони необов’язкові.

Ось чернетка з повним списком:

class MyElement extends HTMLElement {
  constructor() {
    super();
    // елемент створено
  }

  connectedCallback() {
    // браузер викликає цей метод при додаванні елементу в документ
    // (може викликатися багато разів, якщо елемент неодноразово додається/видаляється)
  }

  disconnectedCallback() {
    // браузер викликає цей метод при видаленні елементу з документу
    // (може викликатися багато разів, якщо елемент неодноразово додається/видаляється)
  }

  static get observedAttributes() {
    return [/* масив імен атрибутів для моніторингу змін */];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // викликається при зміні одного з перерахованих вище атрибутів
  }

  adoptedCallback() {
    // викликається, коли елемент переміщується в новий документ
    // (відбувається в document.adoptNode, дуже рідко використовується)
  }

  // тут можуть бути інші методи та властивості елемента
}

Після цього нам потрібно зареєструвати елемент:

// повідомляємо браузеру, що <my-element> обслуговується нашим новим класом
customElements.define("my-element", MyElement);

Тепер для будь-якого HTML-елемента з тегом <my-element> створюється екземпляр MyElement і викликаються вищезгадані методи. Ми також можемо викликати document.createElement('my-element') в JavaScript.

Приклад: “time-formatted”

Наприклад, в HTML вже існує елемент