Веб-разработка
Web Components и Shadow DOM
YouTube использует Web Components для своего custom player (кнопки, controls, seekbar). GitHub использует Web Components для большинства UI элементов (relative-time, clipboard-copy, details-dialog). Это не эксперимент - это production технология в двух из самых посещаемых сайтов мира. Shadow DOM гарантирует что CSS одной команды не сломает компоненты другой.
- **Adobe Spectrum** - design system на Web Components используется во всех Adobe продуктах (Photoshop web, Creative Cloud) и доступен для партнёров - React/Vue/Angular wrapper включены
- **Salesforce Lightning Web Components** построен полностью на Web Components стандарте - одни компоненты работают в Salesforce App, третьих-сторонних SPA и мобильных приложениях
- **Google Material Web** (Material 3) - официальная реализация Material Design на Lit; используется в Google Workspace и открыта для всех разработчиков
Custom Elements
Custom Elements API позволяет создавать собственные HTML элементы (`<my-button>`, `<user-card>`) с кастомным поведением. Расширяет HTMLElement, регистрируется через `customElements.define()`. Lifecycle callbacks: `connectedCallback` (элемент добавлен в DOM), `disconnectedCallback` (удалён), `attributeChangedCallback` (атрибут изменился), `adoptedCallback` (перемещён в другой document).
Custom Elements - часть Web Components стандарта W3C. Поддержка браузерами: 97%+ (2024). Причины использования: design system компоненты которые работают в любом фреймворке (React, Vue, Angular, vanilla JS), встраиваемые виджеты (платёжные формы, чат виджеты), micro-frontend интеграция. Customized built-in elements (`<button is='my-button'>`) - поддержка в Safari ограничена.
Какое главное преимущество Custom Elements над React/Vue компонентами?
Shadow DOM
Shadow DOM - изолированное DOM дерево внутри элемента. Стили снаружи не проникают внутрь (нет CSS leakage), стили изнутри не вытекают наружу (нет CSS pollution). Это позволяет создавать компоненты с гарантированной стилевой изоляцией - именно так работают `<video>`, `<input type='range'>`, `<select>` в браузере.
CSS Custom Properties (переменные) пробивают Shadow DOM - это механизм кастомизации снаружи: `--primary-color: #1a73e8` в родительском CSS влияет на Shadow DOM если компонент использует `var(--primary-color)`. `::part()` CSS pseudo-element позволяет стилизовать помеченные части Shadow DOM снаружи: `my-button::part(label) { color: red; }`.
Как CSS Custom Properties помогают кастомизировать Shadow DOM компонент снаружи?
Slots и Composition
Slots - механизм composition в Web Components: позволяют вставлять внешний HTML контент внутрь Shadow DOM. Default slot: `<slot></slot>` - всё что передано как children. Named slots: `<slot name='header'>` - выбирать контент через `slot='header'` атрибут. Это аналог children/slots в React/Vue.
Slotted content остаётся в Light DOM (не перемещается в Shadow DOM физически), только отображается через slot. CSS `::slotted(selector)` позволяет стилизовать slotted контент изнутри Shadow DOM. Важно: стили из Shadow DOM не влияют на slotted контент (он в Light DOM); можно стилизовать только через `::slotted()`.
Где физически находится slotted контент в DOM?
Lit Framework
Lit (от Google) - минимальный framework для Web Components: 5KB, реактивное состояние через decorators, эффективный template rendering через tagged template literals. `LitElement` расширяет HTMLElement и добавляет: `@property()` для реактивных свойств, `html` tagged template для шаблонов, автоматический ре-рендер при изменении properties.
Lit используется в Google продуктах (Google Photos, YouTube Studio, Material Web) и Adobe Spectrum (design system). Declarative Shadow DOM (DSD) - новый стандарт для SSR Web Components: `<template shadowrootmode='open'>` в HTML позволяет shadow DOM без JavaScript. Lit поддерживает SSR через @lit-labs/ssr.
Web Components заменят React, Vue и Angular в будущем
Web Components и фреймворки решают разные задачи. Web Components = стандартные переиспользуемые примитивы (особенно для design systems), кроссфреймворочная совместимость. React/Vue/Angular = управление state, routing, form validation, ecosystem. Они дополняют друг друга: компании создают design system на Web Components и используют их в React/Vue приложениях
Shoelace, Material Web, Adobe Spectrum - design systems на Web Components, используемые в React/Vue. Это показывает complementary природу технологий
Зачем CustomEvent нужен параметр `composed: true` в Lit компоненте?
Ключевые идеи
- **Custom Elements** - нативные browser компоненты работающие в любом фреймворке; регистрация через customElements.define(); lifecycle: connected/disconnected/attributeChanged
- **Shadow DOM** - стилевая изоляция; CSS variables и ::part() для кастомизации снаружи; slotted контент остаётся в Light DOM
- **Slots + Lit** - named slots для flexible composition; Lit добавляет реактивность (@property, @state) и efficient template rendering при 5KB overhead
Связанные темы
Web Components используются в микрофронтендах и design systems:
- Микрофронтенды — Web Components - один из главных механизмов изоляции микрофронтендов: Shadow DOM гарантирует отсутствие CSS конфликтов между командами
- Архитектура крупных веб-приложений — Design System на Web Components - основа для consistency в монорепо с несколькими фреймворками
Вопросы для размышления
- Если команда уже использует React - когда имеет смысл создавать Web Components для design system вместо React компонентов?
- Как организовать двустороннюю коммуникацию между React родительским компонентом и Web Component дочерним?
- Declarative Shadow DOM (DSD) решает проблему SSR для Web Components. Какие ограничения остаются?