Web Platform · Cluster
DOM and Events
Tree mutation, propagation, and observers.
- 01 Node Identity and Structural Mutation in the DOM Tree A DOM node is an object with one parent slot, and every insertion is a removal followed by an attach, with range adjustment, observer records, and adoption steps folded into that single call.
- 02 Event Propagation: The Path, the Three Phases, and the Stop Flags Dispatch walks a path computed before any listener runs, invoking capture listeners downward and bubble listeners upward, with separate flags for stopping traversal and cancelling the default action.
- 03 Listener Identity, Options, and Removal During Dispatch Registrations are keyed by type, callback, and capture flag alone, so options like once and passive stick to the first registration, and removal criteria are narrower than most callers expect.
- 04 MutationObserver Records, Batching, and Microtask Delivery Observers accumulate a record per mutation and deliver them once per microtask checkpoint, which coalesces bursts into a single callback and makes delivery timing a question about the event loop.
- 05 Shadow DOM Boundaries and Event Retargeting Events leaving a shadow tree carry a different target for each listener on the path, and the composed flag decides whether the path crosses the boundary at all.
- 06 Live Collections, Static Snapshots, and the Cost of Traversal Query results differ in whether they track later mutations, and that difference decides whether iteration is safe and when a query pays for a full subtree walk.
- 07 Pointer Events: Capture, Coalescing, and the Hit-Test Boundary A pointer stream follows one device from down to up, and capture replaces hit testing as the routing rule while coalescing hides the samples the browser merged into a frame.
- 08 Resize and Intersection Observers: Delivery Inside the Rendering Update Both observers report geometry without polling, but they run at different points in the frame, and resize delivery can force a second layout that intersection delivery never causes.
- 09 Custom Element Reactions and Their Synchronous Callback Contract Lifecycle callbacks are queued reactions invoked at the end of the DOM operation that caused them, which makes them synchronous but batched, and explains upgrade ordering.
- 10 How Ranges Survive Mutation: Boundary Points and Live Updates A range is two boundary points that the DOM rewrites on every insertion and removal, and the adjustment rules explain both editing behaviour and the per-mutation cost of keeping ranges alive.