Web Components и Shadow DOM

↑ 7.4 Browser API · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Нативные компоненты: для микрофронтендов и библиотек без привязки к фреймворку.

Три технологии

1. Custom Elements — свои теги с жизненным циклом.
2. Shadow DOM — изолированное поддерево: стили не «протекают» ни внутрь, ни наружу.
3. HTML templates и slots — шаблоны и проекция контента.

class UserBadge extends HTMLElement {
  static observedAttributes = ['name']
  #root = this.attachShadow({ mode: 'open' })
  connectedCallback() { this.render() }
  attributeChangedCallback() { this.render() }
  render() {
    this.#root.innerHTML = `
      <style>:host { display: inline-block } .b { padding: 2px 8px; border-radius: 8px }</style>
      <span class="b"><slot></slot> ${this.getAttribute('name') ?? ''}</span>`
  }
}
customElements.define('user-badge', UserBadge)

Жизненный цикл: connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback.

Стили и Shadow DOM

• внутри shadow-root — свои стили, глобальные не действуют;
• наружу открываем настройку через CSS custom properties (--badge-color) и ::part(name);
• :host, :host-context, ::slotted().

Vue и Web Components

import { defineCustomElement } from 'vue'
const MyElement = defineCustomElement(MyComponent)
customElements.define('my-element', MyElement)

Использование Web Components в Vue: compilerOptions.isCustomElement: tag => tag.startsWith('my-').

Когда использовать

Дизайн-система для нескольких фреймворков, виджеты для встраивания на чужие сайты, микрофронтенды с изоляцией. Минусы: SSR, формы (ElementInternals), доступность и теневые границы требуют внимания.

Вопросы с ответами

Зачем Shadow DOM?

Инкапсуляция стилей и разметки: внешние стили не ломают компонент, стили компонента не влияют на страницу.

Как стилизовать Web Component снаружи?

Через CSS-переменные (наследуются в shadow) и ::part(), если автор компонента открыл части.