Разработка
Что такое Web Components
Стандарт переиспользуемых UI-компонентов
Web Components — это набор веб-стандартов для создания переиспользуемых пользовательских HTML-элементов с инкапсулированной функциональностью.
Основные технологии
- Custom Elements — создание собственных HTML-тегов
- Shadow DOM — инкапсуляция стилей и разметки
- HTML Templates — шаблоны для повторного использования
- ES Modules — модульная загрузка компонентов
Преимущества
- Работают без фреймворков
- Совместимы со всеми браузерами
- Инкапсуляция стилей
- Переиспользование между проектами
Пример
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
Библиотеки
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)