Всплытие событий и Shadow DOM boundaries

В Lit взаимодействие с DOM и событиями строится на стандартных веб-технологиях, но наличие Shadow DOM накладывает определённые особенности на обработку событий. Понимание механизма всплытия событий и работы с границами Shadow DOM критично для построения модульных и изолированных компонентов.

Shadow DOM и его изоляция

Shadow DOM создаёт инкапсулированное дерево DOM, которое физически отделено от основного документа. Элементы внутри Shadow DOM имеют собственные стили и структуру, что предотвращает конфликт CSS и обеспечивает инкапсуляцию логики.

Ключевые моменты:

Элементы внутри Shadow DOM не доступны через обычные селекторы document.querySelector.
Стили из внешнего документа не наследуются автоматически.
Всплытие событий ограничено особенностями Shadow DOM, что влияет на обработку пользовательских и стандартных событий.

Механизм всплытия событий

События в DOM проходят три фазы:

Capture phase — событие идёт от корня документа к целевому элементу.
Target phase — событие достигает целевого элемента.
Bubble phase — событие всплывает от целевого элемента обратно к корню документа.

В Lit, как и в стандартном DOM, можно подписаться на событие через метод addEventListener с указанием опции { capture: true } для перехвата на фазе capture.

this.addEventListener('click', (e) => {
  console.log('Клик внутри компонента');
}, { capture: true });

Влияние Shadow DOM на всплытие

События в Shadow DOM имеют собственные особенности:

Standard events (например, click, input) всплывают сквозь границы Shadow DOM и доступны в родительском документе.
Custom events по умолчанию не покидают Shadow DOM. Чтобы событие могло всплыть наружу, необходимо установить composed: true.

this.dispatchEvent(new CustomEvent('custom-event', {
  detail: { value: 42 },
  bubbles: true,
  composed: true
}));

Параметры:

bubbles: true — позволяет событию всплывать внутри текущего дерева.
composed: true — разрешает событию пересекать границу Shadow DOM.

Без composed: true событие остаётся локальным внутри Shadow DOM.

Подписка на события внутри Lit-компонентов

Lit предоставляет декларативный способ подписки на события через директиву @event:

html`
  <button @click=${this.handleClick}>Нажми меня</button>
`;

При этом важно помнить:

События, отправленные из вложенного компонента с Shadow DOM, должны быть composed, чтобы обработчик сработал в родительском компоненте.
Если событие не пересекает границу Shadow DOM, его нужно обрабатывать внутри компонента, где оно было сгенерировано.

Практические сценарии

Компонент с внутренним состоянием и событиями

class CounterComponent extends LitElement {
  static properties = { count: { type: Number } };
  constructor() {
    super();
    this.count = 0;
  }
  
  increment() {
    this.count++;
    this.dispatchEvent(new CustomEvent('count-changed', {
      detail: { count: this.count },
      bubbles: true,
      composed: true
    }));
  }

  render() {
    return html`
      <button @click=${this.increment}>+1</button>
      <span>${this.count}</span>
    `;
  }
}
customElements.define('counter-component', CounterComponent);

В этом примере событие count-changed будет доступно и родительскому компоненту, и всему документу благодаря composed: true.

Обработка событий на родительском уровне

html`
  <counter-component @count-changed=${this.onCountChanged}></counter-component>
`;

onCountChanged сработает только если событие было composed.

Разграничение ответственности и инкапсуляция

Использование Shadow DOM и правильная настройка событий позволяют:

Ограничить побочные эффекты изменения состояния в компонентах.
Изолировать внутренние события от внешнего кода, если это необходимо (не устанавливать composed: true для внутренних уведомлений).
Создавать модульные компоненты, безопасные для повторного использования.