Custom events

CustomEvent позволяет публиковать семантические события без жёсткой связи вызывающего кода с деталями реализации. Событие может нести detail и включать bubble или пересечение границ shadow. Полезно для web components и изолированных виджетов, но владение состоянием приложения должно оставаться явным.

					panel.dispatchEvent(
  new CustomEvent('panel:save', {
    bubbles: true,
    composed: true,
    detail: { id: panel.dataset.id },
  })
);
				

Потребители должны воспринимать detail как read-only уведомление. Изменяемые общие объекты в detail незаметно связывают соседние модули.

На интервью: когда custom events чище прямых callback и когда превращаются в скрытый глобальный control flow.

Типовые ошибки: крупный изменяемый detail; события — уведомления, не замена явной модели состояния.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

• Семантические имена и документация.
• Маленький detail, по возможности неизменяемый.
• Осознанно выбирайте bubbling и composed.
• Не делайте события единственным источником истины.