Coordinate components with custom events

The task list should not need to know every counter, filter, or status widget that consumes its changes. A custom DOM event can publish a small fact at the board boundary and let interested ancestors respond.

Create a CustomEvent with a stable name and minimal detail. Set bubbles: true so a listener on the board or document can receive an event dispatched by a card. The producer reports what happened; it does not reach into the counter’s private markup.

card.dispatchEvent(new CustomEvent("taskchange", {
  bubbles: true,
  detail: { id: card.dataset.taskId, complete }
}))

board.addEventListener("taskchange", event => {
  remainingOutput.value = board.querySelectorAll(
    ".task:not([data-complete])"
  ).length
})

Event names are strings shared by producers and consumers. Choose a project-specific name, document its detail shape, and avoid changing it casually. A typo does not fail loudly; the listener simply never runs.

detail is passed by reference. Do not expose a mutable internal object that a listener can modify unexpectedly. A small new object with an ID and primitive state makes the boundary obvious.

Custom events are synchronous. Every listener runs during dispatchEvent(), and a thrown error or expensive calculation can complicate the originating action. Keep listeners small and schedule genuinely asynchronous work through the appropriate API.

Add one listener that updates a remaining-task output and another that logs changes clearly. Remove the logger without touching task-card code. Dispatch a test event with a nonexistent ID and make the consumer ignore it safely; an event is a notification, not proof that its data is valid. If an ancestor receives nothing, confirm the event uses bubbles: true, the names match exactly, and dispatch occurs from an element inside the listener’s subtree.