Что такое Web Components?
📅
Определение
Web Components — это не библиотека и не фреймворк. Это набор стандартов браузера, который позволяет создавать собственные, инкапсулированные и переиспользуемые HTML-теги. По сути, это нативная реализация компонентного подхода, встроенная прямо в веб-платформу.
Ключевые технологии, входящие в стандарт:
- Custom Elements — позволяет определять свои собственные HTML-теги (например,
<user-card>или<fancy-button>). - Shadow DOM — обеспечивает настоящую инкапсуляцию для стилей и структуры компонента. Стили внутри компонента не просачиваются наружу, а внешние стили не влияют на внутренности компонента.
- HTML Templates (
<template>и<slot>) — позволяют описывать фрагменты разметки, которые не отображаются при загрузке страницы, но могут быть использованы и клонированы в дальнейшем в коде компонента.
Хотите посмотреть как это выглядит?
Базовый пример
<!-- 1. Объявляем компонент -->
<hello-world></hello-world>
<script>
// 2. Создаём класс
class HelloWorld extends HTMLElement {
connectedCallback() {
this.innerHTML = `<p>Привет, мир!</p>`;
}
}
// 3. Регистрируем
customElements.define('hello-world', HelloWorld);
</script>
или вообще без js:
<hello-world>
<template shadowrootmode="open">
<p>Привет, мир!</p>
</template>
</hello-world>
</script>
Компонент создан. Это все валидно и работает в любом современном браузере, без всяких сборщиков и других надстроек. Можете открыть сами и посмотреть.
Поддержка
| Браузер | Custom Elements | Shadow DOM | Templates |
|---|---|---|---|
| Chrome | ✅ Полная | ✅ Полная | ✅ Полная |
| Firefox | ✅ Полная | ✅ Полная | ✅ Полная |
| Safari | ✅ Полная | ✅ Полная | ✅ Полная |
| Edge | ✅ Полная | ✅ Полная | ✅ Полная |
| IE11 | ❌ Нет | ❌ Нет | ⚠️ Частичная |
Полифиллы
Для старых браузеров подключите:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.8.0/webcomponents-bundle.js"></script>
Важно: Полифиллы добавляют ~20 КБ к весу страницы. Используйте только при необходимости.