14 вересня 2025 р.Українська

Детальний огляд життєвого циклу вебкомпонентів, що охоплює створення, підключення, зміну атрибутів та відключення кастомних елементів. Навчіться створювати надійні компоненти для сучасних вебзастосунків.

Життєвий цикл вебкомпонентів: освоєння створення та управління кастомними елементами

Вебкомпоненти — це потужний інструмент для створення UI-елементів для повторного використання та з інкапсуляцією в сучасній веброзробці. Розуміння життєвого циклу вебкомпонента має вирішальне значення для створення надійних, підтримуваних та продуктивних застосунків. Цей вичерпний посібник досліджує різні етапи життєвого циклу вебкомпонента, надаючи детальні пояснення та практичні приклади, які допоможуть вам освоїти створення та управління кастомними елементами.

Що таке вебкомпоненти?

Вебкомпоненти — це набір API вебплатформи, що дозволяють створювати власні HTML-елементи для повторного використання з інкапсульованими стилями та поведінкою. Вони складаються з трьох основних технологій:

Кастомні елементи (Custom Elements): Дозволяють визначати власні HTML-теги та пов'язану з ними логіку JavaScript.
Тіньовий DOM (Shadow DOM): Забезпечує інкапсуляцію, створюючи окреме DOM-дерево для компонента, що захищає його від глобальних стилів та скриптів документа.
HTML-шаблони (HTML Templates): Дозволяють визначати фрагменти HTML для повторного використання, які можна ефективно клонувати та вставляти в DOM.

Вебкомпоненти сприяють повторному використанню коду, покращують підтримку та дозволяють створювати складні користувацькі інтерфейси модульним та організованим способом. Вони підтримуються всіма основними браузерами і можуть використовуватися з будь-яким JavaScript-фреймворком чи бібліотекою, або навіть без них.

Життєвий цикл вебкомпонента

Життєвий цикл вебкомпонента визначає різні етапи, через які проходить кастомний елемент від його створення до видалення з DOM. Розуміння цих етапів дозволяє виконувати конкретні дії в потрібний час, забезпечуючи правильну та ефективну поведінку вашого компонента.

Основні методи життєвого циклу:

constructor(): Конструктор викликається, коли елемент створюється або "оновлюється". Саме тут ви ініціалізуєте стан компонента та створюєте його тіньовий DOM (за потреби).
connectedCallback(): Викликається щоразу, коли кастомний елемент підключається до DOM документа. Це гарне місце для виконання завдань налаштування, таких як отримання даних, додавання слухачів подій або рендеринг початкового вмісту компонента.
disconnectedCallback(): Викликається щоразу, коли кастомний елемент відключається від DOM документа. Саме тут слід очищувати будь-які ресурси, наприклад, видаляти слухачів подій або скасовувати таймери, щоб запобігти витокам пам'яті.
attributeChangedCallback(name, oldValue, newValue): Викликається щоразу, коли один з атрибутів кастомного елемента додається, видаляється, оновлюється або замінюється. Це дозволяє реагувати на зміни в атрибутах компонента та відповідно оновлювати його поведінку. Вам потрібно вказати, за якими атрибутами ви хочете спостерігати, за допомогою статичного гетера observedAttributes.
adoptedCallback(): Викликається щоразу, коли кастомний елемент переміщується в новий документ. Це актуально при роботі з iframe або при переміщенні елементів між різними частинами застосунку.

Глибше занурення в кожен метод життєвого циклу

1. constructor()

Конструктор — це перший метод, який викликається при створенні нового екземпляра вашого кастомного елемента. Це ідеальне місце для:

Ініціалізації внутрішнього стану компонента.
Створення тіньового DOM за допомогою this.attachShadow({ mode: 'open' }) або this.attachShadow({ mode: 'closed' }). Режим mode визначає, чи буде тіньовий DOM доступний з JavaScript поза компонентом (open) чи ні (closed). Зазвичай рекомендується використовувати open для легшого налагодження.
Прив'язки методів-обробників подій до екземпляра компонента (за допомогою this.methodName = this.methodName.bind(this)), щоб гарантувати, що this посилається на екземпляр компонента всередині обробника.

Важливі зауваження щодо конструктора:

Ви не повинні виконувати жодних маніпуляцій з DOM у конструкторі. Елемент ще не повністю підключений до DOM, і спроба його змінити може призвести до несподіваної поведінки. Використовуйте connectedCallback для маніпуляцій з DOM.
Уникайте використання атрибутів у конструкторі. Атрибути можуть бути ще недоступними. Використовуйте замість цього connectedCallback або attributeChangedCallback.
Спочатку викличте super(). Це обов'язково, якщо ви успадковуєте від іншого класу (зазвичай HTMLElement).

Приклад:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // Створюємо тіньовий корінь
    this.shadow = this.attachShadow({mode: 'open'});
    this.message = "Hello, world!";
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.message);
  }
}

2. connectedCallback()

connectedCallback викликається, коли кастомний елемент підключається до DOM документа. Це основне місце для:

Отримання даних з API.
Додавання слухачів подій до компонента або його тіньового DOM.
Рендерингу початкового вмісту компонента в тіньовий DOM.
Спостереження за змінами атрибутів, якщо негайне спостереження в конструкторі неможливе.

Приклад:


class MyCustomElement extends HTMLElement {
  // ... конструктор ...

  connectedCallback() {
    // Створюємо елемент кнопки
    const button = document.createElement('button');
    button.textContent = 'Натисни мене!';
    button.addEventListener('click', this.handleClick);
    this.shadow.appendChild(button);

    // Отримання даних (приклад)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
        this.render(); // Викликаємо метод рендерингу для оновлення UI
      });
  }

  render() {
    // Оновлюємо тіньовий DOM на основі даних
    const dataElement = document.createElement('p');
    dataElement.textContent = JSON.stringify(this.data);
    this.shadow.appendChild(dataElement);
  }

  handleClick() {
      alert("Кнопку натиснуто!");
  }
}

3. disconnectedCallback()

disconnectedCallback викликається, коли кастомний елемент відключається від DOM документа. Це критично важливо для:

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

Приклад:


class MyCustomElement extends HTMLElement {
  // ... конструктор, connectedCallback ...

  disconnectedCallback() {
    // Видаляємо слухач подій
    this.shadow.querySelector('button').removeEventListener('click', this.handleClick);

    // Скасовуємо будь-які таймери (приклад)
    if (this.timer) {
      clearInterval(this.timer);
    }

    console.log('Компонент відключено від DOM.');
  }
}

4. attributeChangedCallback(name, oldValue, newValue)

attributeChangedCallback викликається щоразу, коли атрибут кастомного елемента змінюється, але лише для атрибутів, перелічених у статичному гетері observedAttributes. Цей метод є важливим для:

Реагування на зміни значень атрибутів та оновлення поведінки або вигляду компонента.
Валідації значень атрибутів.

Ключові аспекти:

Ви повинні визначити статичний гетер з назвою observedAttributes, який повертає масив назв атрибутів, за якими ви хочете спостерігати.
attributeChangedCallback буде викликатися лише для атрибутів, перелічених у observedAttributes.
Метод отримує три аргументи: name (назву) атрибута, що змінився, його oldValue (старе значення) та newValue (нове значення).
oldValue буде null, якщо атрибут був щойно доданий.

Приклад:


class MyCustomElement extends HTMLElement {
  // ... конструктор, connectedCallback, disconnectedCallback ...

  static get observedAttributes() {
    return ['message', 'data-count']; // Спостерігаємо за атрибутами 'message' та 'data-count'
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'message') {
      this.message = newValue; // Оновлюємо внутрішній стан
      this.renderMessage(); // Перерендеримо повідомлення
    } else if (name === 'data-count') {
      const count = parseInt(newValue, 10);
      if (!isNaN(count)) {
        this.count = count; // Оновлюємо внутрішній лічильник
        this.renderCount(); // Перерендеримо лічильник
      } else {
        console.error('Недійсне значення атрибута data-count:', newValue);
      }
    }
  }

  renderMessage() {
    // Оновлюємо відображення повідомлення в тіньовому DOM
    let messageElement = this.shadow.querySelector('.message');

    if (!messageElement) {
      messageElement = document.createElement('p');
      messageElement.classList.add('message');
      this.shadow.appendChild(messageElement);
    }

    messageElement.textContent = this.message;
  }

  renderCount(){
    let countElement = this.shadow.querySelector('.count');

    if(!countElement){
        countElement = document.createElement('p');
        countElement.classList.add('count');
        this.shadow.appendChild(countElement);
    }

    countElement.textContent = `Лічильник: ${this.count}`;
  }
}

Ефективне використання attributeChangedCallback:

Валідація вводу: Використовуйте колбек для перевірки нового значення, щоб забезпечити цілісність даних.
Debounce оновлень: Для обчислювально дорогих оновлень розгляньте можливість використання debounce для обробника змін атрибутів, щоб уникнути надмірних перерендерів.
Розгляньте альтернативи: Для складних даних розгляньте можливість використання властивостей замість атрибутів і обробляйте зміни безпосередньо в сетері властивості.

5. adoptedCallback()

adoptedCallback викликається, коли кастомний елемент переміщується в новий документ (наприклад, при переміщенні з одного iframe в інший). Це менш поширений метод життєвого циклу, але важливо знати про нього при роботі зі складнішими сценаріями, що включають контексти документів.

Приклад:


class MyCustomElement extends HTMLElement {
  // ... конструктор, connectedCallback, disconnectedCallback, attributeChangedCallback ...

  adoptedCallback() {
    console.log('Компонент переміщено в новий документ.');
    // Виконайте будь-які необхідні налаштування, коли компонент переміщується в новий документ
    // Це може включати оновлення посилань на зовнішні ресурси або відновлення з'єднань.
  }
}

Визначення кастомного елемента

Після того, як ви визначили клас свого кастомного елемента, вам потрібно зареєструвати його в браузері за допомогою customElements.define():


customElements.define('my-custom-element', MyCustomElement);

Перший аргумент — це назва тегу для вашого кастомного елемента (наприклад, 'my-custom-element'). Назва тегу повинна містити дефіс (-), щоб уникнути конфліктів зі стандартними HTML-елементами.

Другий аргумент — це клас, що визначає поведінку вашого кастомного елемента (наприклад, MyCustomElement).

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


<my-custom-element message="Привіт від атрибута!" data-count="10"></my-custom-element>

Найкращі практики управління життєвим циклом вебкомпонентів

Робіть конструктор легким: Уникайте маніпуляцій з DOM або складних обчислень у конструкторі. Використовуйте для цих завдань connectedCallback.
Очищуйте ресурси в disconnectedCallback: Завжди видаляйте слухачів подій, скасовуйте таймери та звільняйте ресурси в disconnectedCallback, щоб запобігти витокам пам'яті.
Використовуйте observedAttributes розумно: Спостерігайте лише за тими атрибутами, на які вам дійсно потрібно реагувати. Спостереження за непотрібними атрибутами може вплинути на продуктивність.
Розгляньте можливість використання бібліотеки для рендерингу: Для складних оновлень UI розгляньте можливість використання бібліотеки для рендерингу, такої як LitElement або uhtml, щоб спростити процес та покращити продуктивність.
Ретельно тестуйте свої компоненти: Пишіть юніт-тести, щоб переконатися, що ваші компоненти поводяться правильно протягом усього їхнього життєвого циклу.

Приклад: Простий компонент-лічильник

Давайте створимо простий компонент-лічильник, який демонструє використання життєвого циклу вебкомпонента:


class CounterComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.count = 0;
    this.increment = this.increment.bind(this);
  }

  connectedCallback() {
    this.render();
    this.shadow.querySelector('button').addEventListener('click', this.increment);
  }

  disconnectedCallback() {
    this.shadow.querySelector('button').removeEventListener('click', this.increment);
  }

  increment() {
    this.count++;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <p>Лічильник: ${this.count}</p>
      <button>Збільшити</button>
    `;
  }
}

customElements.define('counter-component', CounterComponent);

Цей компонент підтримує внутрішню змінну count і оновлює дисплей при натисканні кнопки. connectedCallback додає слухача подій, а disconnectedCallback його видаляє.

Просунуті техніки вебкомпонентів

1. Використання властивостей замість атрибутів

Хоча атрибути корисні для простих даних, властивості пропонують більшу гнучкість та безпеку типів. Ви можете визначати властивості у вашому кастомному елементі та використовувати гетери й сетери для контролю доступу до них та їх зміни.


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._data = null; // Використовуємо приватну властивість для зберігання даних
  }

  get data() {
    return this._data;
  }

  set data(value) {
    this._data = value;
    this.renderData(); // Перерендеримо компонент при зміні даних
  }

  connectedCallback() {
    // Початковий рендеринг
    this.renderData();
  }

  renderData() {
    // Оновлюємо тіньовий DOM на основі даних
    this.shadow.innerHTML = `<p>Дані: ${JSON.stringify(this._data)}</p>`;
  }
}

customElements.define('my-data-element', MyCustomElement);

Потім ви можете встановити властивість data безпосередньо в JavaScript:


const element = document.querySelector('my-data-element');
element.data = { name: 'John Doe', age: 30 };

2. Використання подій для комунікації

Кастомні події — це потужний спосіб для вебкомпонентів спілкуватися один з одним та із зовнішнім світом. Ви можете відправляти кастомні події зі свого компонента та слухати їх в інших частинах вашого застосунку.


class MyCustomElement extends HTMLElement {
  // ... конструктор, connectedCallback ...

  dispatchCustomEvent() {
    const event = new CustomEvent('my-custom-event', {
      detail: { message: 'Привіт від компонента!' },
      bubbles: true, // Дозволити події спливати вгору по DOM-дереву
      composed: true // Дозволити події перетинати межу тіньового DOM
    });

    this.dispatchEvent(event);
  }
}

customElements.define('my-event-element', MyCustomElement);

// Слухаємо кастомну подію в батьківському документі
document.addEventListener('my-custom-event', (event) => {
  console.log('Отримано кастомну подію:', event.detail.message);
});

3. Стилізація тіньового DOM

Тіньовий DOM забезпечує інкапсуляцію стилів, запобігаючи витоку стилів всередину або назовні компонента. Ви можете стилізувати свої вебкомпоненти за допомогою CSS всередині тіньового DOM.

Вбудовані стилі:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>Це стилізований параграф.</p>
    `;
  }
}

Зовнішні таблиці стилів:

Ви також можете завантажувати зовнішні таблиці стилів у тіньовий DOM:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });

    const linkElem = document.createElement('link');
    linkElem.setAttribute('rel', 'stylesheet');
    linkElem.setAttribute('href', 'my-component.css');

    this.shadow.appendChild(linkElem);
    this.shadow.innerHTML += '<p>Це стилізований параграф.</p>';
  }
}

Висновок

Освоєння життєвого циклу вебкомпонентів є важливим для створення надійних компонентів для повторного використання в сучасних вебзастосунках. Розуміючи різні методи життєвого циклу та використовуючи найкращі практики, ви можете створювати компоненти, які легко підтримувати, які є продуктивними та бездоганно інтегруються з іншими частинами вашого застосунку. Цей посібник надав вичерпний огляд життєвого циклу вебкомпонентів, включаючи детальні пояснення, практичні приклади та просунуті техніки. Використовуйте потужність вебкомпонентів і створюйте модульні, підтримувані та масштабовані вебзастосунки.

Подальше вивчення:

MDN Web Docs: Вичерпна документація про вебкомпоненти та кастомні елементи.
WebComponents.org: Ресурс для розробників вебкомпонентів, що підтримується спільнотою.
LitElement: Простий базовий клас для створення швидких, легковагих вебкомпонентів.