Навіщо потрібні Custom Elements?

Повне пояснення

1. Що це і навіщо. Custom Elements – це стандарт Web Components, що дозволяє розширювати мову HTML власними тегами. Вони потрібні для створення повторно використовуваних, ізольованих UI‑компонентів у великих додатках.

2. Ключові принципи, терміни, інваріанти. • Tag name – назва тега має містити дефіс (наприклад, <my-card>). • Shadow DOM – ізольований піддерево, що приховує стилі і структуру від глобального DOM. • Lifecycle callbacks – connectedCallback, disconnectedCallback, attributeChangedCallback. • Observed attributes – масив, що визначає атрибути, за якими слід відстежувати зміни.

3. Як це працює.

   1. Реєстрація: customElements.define('my-card', MyCard);.
   2. При створенні елемента браузер викликає connectedCallback.
   3. Якщо атрибут змінюється, викликається attributeChangedCallback.
   4. При видаленні з DOM – disconnectedCallback.

4. Практика і реалізація (React/Next.js).

   class MyCard extends HTMLElement {
     constructor() { super(); this.attachShadow({mode: 'open'}); }
     connectedCallback() {
       this.shadowRoot!.innerHTML = `<p>${this.getAttribute('title')}</p>`;
     }
   }
   customElements.define('my-card', MyCard);
   

   У React можна використовувати через useEffect або бібліотеку react-custom-element.

5. Тестування. • Jest + @testing-library/dom: render(<my-card title="Test"></my-card>);. • Playwright: перевірка відображення в реальному браузері.

6. Оптимізація продуктивності. • Використовувати requestAnimationFrame у callback‑ах. • Мінімізувати кількість Shadow DOM‑вкладок, щоб зменшити рендеринг.

7. Accessibility. • Додати role і ARIA‑атрибути у Shadow DOM. • Переконатися, що елементи доступні клавіатурою.

8. Безпека та валідація. • Санітизація вхідних даних перед вставкою у Shadow DOM, щоб уникнути XSS. • Використовувати CSP‑заголовки для обмеження виконання скриптів.

9. Типові помилки й edge cases. • Заборонено оголошувати тег без дефісу – браузер видасть помилку. • Необхідно оголосити observedAttributes перед зміною атрибутів. • Перевірка на підтримку Shadow DOM у старих браузерах (Polyfill).

10. Cheatsheet + можливі follow‑up питання. • customElements.define(name, constructor) – реєстрація. • extends: HTMLElement – базовий клас. • Питання: Як працює Shadow DOM із CSS‑інкапсуляцією? Чому потрібен дефіс у назві тега?