M

MLOG

Українська

Дізнайтеся про потужність веб-компонентів, зокрема кастомних елементів, для створення інкапсульованих UI-компонентів багаторазового використання для різноманітних веб-додатків.

Веб-компоненти: Глибоке занурення у кастомні елементи

Веб-компоненти є значним кроком уперед у веб-розробці, пропонуючи стандартизований спосіб створення інкапсульованих UI-компонентів для багаторазового використання. Серед основних технологій, що складають веб-компоненти, кастомні елементи (Custom Elements) виділяються як наріжний камінь для визначення нових тегів HTML з власною поведінкою та рендерингом. Цей вичерпний посібник заглиблюється в тонкощі кастомних елементів, досліджуючи їхні переваги, реалізацію та найкращі практики для створення сучасних веб-додатків.

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

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

Розуміння кастомних елементів

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

Визначення кастомних елементів

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

  1. Назва елемента: Рядок, що представляє назву кастомного елемента. Назва повинна містити дефіс (-), щоб уникнути конфліктів зі стандартними елементами HTML. Наприклад, my-element — це дійсна назва, а myelement — ні.
  2. Клас елемента: Клас JavaScript, що розширює HTMLElement і визначає поведінку кастомного елемента.

Ось простий приклад:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Привіт, світе!';
  }
}

customElements.define('my-element', MyElement);

У цьому прикладі ми визначаємо кастомний елемент з назвою my-element. Клас MyElement розширює HTMLElement і в конструкторі встановлює внутрішній HTML-вміст елемента на "Привіт, світе!".

Колбеки життєвого циклу кастомних елементів

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

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

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

  connectedCallback() {
    this.shadow.innerHTML = `
Під'єднано до DOM!
`;
    console.log('Елемент під\'єднано');
  }

  disconnectedCallback() {
    console.log('Елемент від\'єднано');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);

У цьому прикладі connectedCallback() виводить повідомлення в консоль і встановлює внутрішній HTML-вміст елемента, коли він підключається до DOM. disconnectedCallback() виводить повідомлення, коли елемент відключається. attributeChangedCallback() викликається при зміні атрибута data-message, відповідно оновлюючи вміст елемента. Геттер observedAttributes вказує, що ми хочемо спостерігати за змінами атрибута data-message.

Використання Shadow DOM для інкапсуляції

Shadow DOM забезпечує інкапсуляцію для веб-компонентів, дозволяючи створити окреме DOM-дерево для компонента, яке ізольоване від решти сторінки. Це означає, що стилі та скрипти, визначені в Shadow DOM, не впливатимуть на решту сторінки, і навпаки. Ця інкапсуляція допомагає запобігти конфліктам і гарантує, що ваші компоненти поводитимуться передбачувано.

Щоб використовувати Shadow DOM, ви можете викликати метод attachShadow() для елемента. Цей метод приймає об'єкт параметрів, що вказує режим Shadow DOM. mode може бути або 'open', або 'closed'. Якщо режим 'open', до Shadow DOM можна отримати доступ з JavaScript за допомогою властивості shadowRoot елемента. Якщо режим 'closed', доступ до Shadow DOM з JavaScript неможливий.

Ось приклад, що демонструє використання Shadow DOM:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
Це всередині Shadow DOM.

    `;
  }
}

customElements.define('my-element', MyElement);

У цьому прикладі ми прикріплюємо Shadow DOM до елемента з mode: 'open'. Потім ми встановлюємо внутрішній HTML-вміст Shadow DOM, щоб включити стиль, який робить колір абзаців синім, і елемент абзацу з текстом. Стиль, визначений у Shadow DOM, застосовуватиметься лише до елементів у Shadow DOM і не впливатиме на абзаци поза ним.

Переваги використання кастомних елементів

Кастомні елементи пропонують кілька переваг для веб-розробки:

Практичні приклади кастомних елементів

Розглянемо кілька практичних прикладів того, як кастомні елементи можна використовувати для створення поширених UI-компонентів.

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

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

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

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

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        
        ${this._count}
        
      

    `;
  }
}

customElements.define('my-counter', Counter);

Цей код визначає клас Counter, що розширює HTMLElement. Конструктор ініціалізує компонент, прикріплює Shadow DOM і встановлює початкове значення лічильника на 0. Метод connectedCallback() додає обробники подій до кнопок збільшення та зменшення. Методи increment() та decrement() оновлюють лічильник і викликають метод render() для оновлення рендерингу компонента. Метод render() встановлює внутрішній HTML-вміст Shadow DOM, що включає дисплей лічильника та кнопки.

Компонент-карусель зображень

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

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  Зображення каруселі
  

  
  
  

  

  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Цей код визначає клас ImageCarousel, що розширює HTMLElement. Конструктор ініціалізує компонент, прикріплює Shadow DOM, встановлює початковий масив зображень та поточний індекс. Метод connectedCallback() додає обробники подій до кнопок "назад" і "вперед". Методи nextImage() та prevImage() оновлюють поточний індекс і викликають метод render() для оновлення рендерингу компонента. Метод render() встановлює внутрішній HTML-вміст Shadow DOM, що включає поточне зображення та кнопки.

Найкращі практики роботи з кастомними елементами

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

Кастомні елементи та фреймворки

Кастомні елементи розроблені для сумісності з іншими веб-технологіями та фреймворками. Їх можна використовувати разом з популярними фреймворками, такими як React, Angular та Vue.js.

Використання кастомних елементів у React

Щоб використовувати кастомні елементи в React, ви можете просто рендерити їх як будь-який інший HTML-елемент. Однак вам може знадобитися використовувати ref для доступу до базового DOM-елемента та безпосередньої взаємодії з ним.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Доступ до API кастомного елемента
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Отримано кастомну подію:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

У цьому прикладі ми використовуємо ref для доступу до кастомного елемента my-element і додаємо до нього обробник подій. Це дозволяє нам слухати кастомні події, що надсилаються кастомним елементом, і реагувати на них відповідним чином.

Використання кастомних елементів в Angular

Щоб використовувати кастомні елементи в Angular, вам потрібно налаштувати Angular для розпізнавання кастомного елемента. Це можна зробити, додавши кастомний елемент до масиву schemas у конфігурації модуля.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Після реєстрації кастомного елемента ви можете використовувати його у своїх шаблонах Angular, як будь-який інший HTML-елемент.

Використання кастомних елементів у Vue.js

Vue.js також підтримує кастомні елементи нативно. Ви можете використовувати їх безпосередньо у своїх шаблонах без будь-яких спеціальних налаштувань.

Vue автоматично розпізнає кастомний елемент і відрендерить його коректно.

Аспекти доступності (Accessibility)

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

Інтернаціоналізація та локалізація

При розробці кастомних елементів для глобальної аудиторії важливо враховувати інтернаціоналізацію (i18n) та локалізацію (l10n). Ось деякі ключові аспекти:

Висновок

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

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