From 6eeb97c2202bf9d3b2c288d2d86acc14fb4490bb Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Fri, 8 May 2026 13:10:30 +0800
Subject: [PATCH] CustomElement Reactions

While this PR touches a lot of files, and isn't trivial, many of the changes
are either:
1 - removing guards added in previous PRs, e.g.
    https://github.com/lightpanda-io/browser/pull/1969
    https://github.com/lightpanda-io/browser/pull/2172
    https://github.com/lightpanda-io/browser/pull/2313
    https://github.com/lightpanda-io/browser/pull/2366

2 - Adding the `.ce_reactions = true` flag to various WebAPIs

CustomElements have callbacks, e.g. connectedCallback. Also, many WebAPI calls
are implemented as a series of mutations, e.g. appendChild = remove from current
+ append to new.

These two things interact in an important way: when should callbacks execute?
Before this PR, we were invoking callbacks at each individual step. This is
(a) technically wrong and (b) breaks a lot of assumptions (the reason the above
4 PRs were needed to fix bugs).

This PR adds a `_ce_reactions` queue to the frame. And, instead of invoking
callbacks, we "enqueue" the reaction. At various boundaries, a scope is created
the DOM manipulation is done, and then we pop the scope, invoking all queued
reactions.
---
 src/browser/CustomElementReactions.zig        | 129 ++++++++++++++
 src/browser/Frame.zig                         |  61 +++----
 src/browser/ScriptManagerBase.zig             |   7 +
 src/browser/js/Caller.zig                     |  21 +++
 src/browser/js/bridge.zig                     |  12 ++
 src/browser/parser/Parser.zig                 |  22 +++
 .../mutation_during_callback.html             |  74 ++++----
 src/browser/tests/node/append_child.html      |  51 +++---
 src/browser/tests/node/insert_before.html     |  20 +--
 src/browser/webapi/CData.zig                  |  18 +-
 src/browser/webapi/CustomElementRegistry.zig  |  11 +-
 src/browser/webapi/DOMParser.zig              |   2 +-
 src/browser/webapi/Document.zig               |  14 +-
 src/browser/webapi/DocumentFragment.zig       |   8 +-
 src/browser/webapi/Element.zig                |  67 ++++----
 src/browser/webapi/Node.zig                   |  44 ++---
 .../webapi/collections/DOMTokenList.zig       |  10 +-
 src/browser/webapi/element/Attribute.zig      |   6 +-
 src/browser/webapi/element/html/Custom.zig    | 161 ++++++++++--------
 19 files changed, 447 insertions(+), 291 deletions(-)
 create mode 100644 src/browser/CustomElementReactions.zig

diff --git a/src/browser/CustomElementReactions.zig b/src/browser/CustomElementReactions.zig
new file mode 100644
index 00000000..d7e9b1dc
--- /dev/null
+++ b/src/browser/CustomElementReactions.zig
@@ -0,0 +1,129 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+// Implements the spec's "custom element reactions" mechanism: callbacks
+// (connectedCallback, disconnectedCallback, adoptedCallback,
+// attributeChangedCallback) are enqueued during DOM mutation and invoked at
+// the outer algorithm boundary, not synchronously mid-mutation.
+//
+// The "stack of element queues" is collapsed to a single flat ArrayList plus
+// per-scope checkpoint indices: push() captures items.len, popAndInvoke()
+// drains items[checkpoint..] and truncates. Nested scopes work naturally —
+// inside a callback, a new scope captures its own checkpoint past the current
+// length, drains its own range, and the outer iteration continues from where
+// it left off.
+
+const std = @import("std");
+const lp = @import("lightpanda");
+
+const Frame = @import("Frame.zig");
+const Element = @import("webapi/Element.zig");
+const Document = @import("webapi/Document.zig");
+const Custom = @import("webapi/element/html/Custom.zig");
+
+const String = lp.String;
+const Allocator = std.mem.Allocator;
+
+const Self = @This();
+
+allocator: Allocator,
+queue: std.ArrayList(Reaction) = .empty,
+// Number of currently-open scopes (push() that hasn't been pop'd). Every
+// enqueue must happen inside a scope — that's the leak-detection invariant.
+// Checked in debug at enqueue time so leaks surface where the bug is, not
+// later at some unrelated boundary.
+active_scopes: u32 = 0,
+
+/// Open a new reactions scope. Returns a checkpoint to be passed to popAndInvoke.
+pub fn push(self: *Self) usize {
+    self.active_scopes += 1;
+    return self.queue.items.len;
+}
+
+/// Drain reactions queued at indices >= checkpoint, then truncate. Reactions
+/// enqueued within a nested scope drain at that scope's pop, before this loop
+/// sees them.
+pub fn popAndInvoke(self: *Self, checkpoint: usize, frame: *Frame) void {
+    for (self.queue.items[checkpoint..]) |reaction| {
+        Custom.fireReaction(reaction, frame);
+    }
+    self.queue.items.len = checkpoint;
+    self.active_scopes -= 1;
+}
+
+inline fn assertScopeActive(self: *const Self) void {
+    lp.assert(self.active_scopes > 0, "ce_reactions enqueue without active scope", .{});
+}
+
+pub fn enqueueConnected(self: *Self, element: *Element) !void {
+    self.assertScopeActive();
+    try self.queue.append(self.allocator, .{ .connected = element });
+}
+
+pub fn enqueueDisconnected(self: *Self, element: *Element) !void {
+    self.assertScopeActive();
+    try self.queue.append(self.allocator, .{ .disconnected = element });
+}
+
+pub fn enqueueAdopted(self: *Self, element: *Element, old_document: *Document, new_document: *Document) !void {
+    self.assertScopeActive();
+    try self.queue.append(self.allocator, .{ .adopted = .{
+        .element = element,
+        .old_document = old_document,
+        .new_document = new_document,
+    } });
+}
+
+pub fn enqueueAttributeChanged(
+    self: *Self,
+    element: *Element,
+    name: String,
+    old_value: ?String,
+    new_value: ?String,
+    namespace: ?String,
+) !void {
+    self.assertScopeActive();
+    try self.queue.append(self.allocator, .{ .attribute_changed = .{
+        .name = name,
+        .element = element,
+        .old_value = old_value,
+        .new_value = new_value,
+        .namespace = namespace,
+    } });
+}
+
+pub const Reaction = union(enum) {
+    connected: *Element,
+    disconnected: *Element,
+    adopted: Adopted,
+    attribute_changed: AttributeChanged,
+
+    pub const Adopted = struct {
+        element: *Element,
+        old_document: *Document,
+        new_document: *Document,
+    };
+
+    pub const AttributeChanged = struct {
+        element: *Element,
+        name: String,
+        old_value: ?String,
+        new_value: ?String,
+        namespace: ?String,
+    };
+};
diff --git a/src/browser/Frame.zig b/src/browser/Frame.zig
index 49d82d07..e92e00aa 100644
--- a/src/browser/Frame.zig
+++ b/src/browser/Frame.zig
@@ -32,6 +32,8 @@ const StyleManager = @import("StyleManager.zig");
 const Parser = @import("parser/Parser.zig");
 const h5e = @import("parser/html5ever.zig");
 
+const CustomElementReactions = @import("CustomElementReactions.zig");
+
 const URL = @import("URL.zig");
 const Blob = @import("webapi/Blob.zig");
 const Node = @import("webapi/Node.zig");
@@ -185,6 +187,12 @@ _upgrading_element: ?*Node = null,
 // List of custom elements that were created before their definition was registered
 _undefined_custom_elements: std.ArrayList(*Element.Html.Custom) = .{},
 
+// Pending custom-element reactions (connected/disconnected/adopted/attribute
+// changed). Reactions are enqueued during DOM mutation and drained at the
+// outer algorithm boundary — set up by the JS bridge for [CEReactions]
+// methods and by the parser pump on each yield.
+_ce_reactions: CustomElementReactions,
+
 // for heap allocations and managing WebAPI objects
 _factory: *Factory,
 
@@ -291,6 +299,7 @@ pub fn init(self: *Frame, frame_id: u32, page: *Page, parent: ?*Frame) !void {
         ._type = if (parent == null) .root else .frame,
         ._style_manager = undefined,
         ._script_manager = undefined,
+        ._ce_reactions = .{ .allocator = arena },
         ._event_manager = EventManager.init(arena, self),
     };
     self._to_load = &self._to_load_1;
@@ -1965,7 +1974,7 @@ pub fn adoptNodeTree(self: *Frame, node: *Node, old_owner: *Document, new_owner:
 
     // Per spec, adopted steps run on each element after its document is set.
     if (node.is(Element)) |el| {
-        Element.Html.Custom.invokeAdoptedCallbackOnElement(el, old_owner, new_owner, self);
+        Element.Html.Custom.enqueueAdoptedCallbackOnElement(el, old_owner, new_owner, self);
     }
 
     var it = node.childrenIterator();
@@ -2701,7 +2710,7 @@ pub fn createElementNS(self: *Frame, namespace: Element.Namespace, name: []const
                 if (element._attributes) |attributes| {
                     var it = attributes.iterator();
                     while (it.next()) |attr| {
-                        Element.Html.Custom.invokeAttributeChangedCallbackOnElement(
+                        Element.Html.Custom.enqueueAttributeChangedCallbackOnElement(
                             element,
                             attr._name,
                             null, // old_value is null for initial attributes
@@ -3094,7 +3103,7 @@ pub fn removeNode(self: *Frame, parent: *Node, child: *Node, opts: RemoveNodeOpt
             self.removeElementIdWithMaps(id_maps.?, id);
         }
 
-        Element.Html.Custom.invokeDisconnectedCallbackOnElement(el, self);
+        Element.Html.Custom.enqueueDisconnectedCallbackOnElement(el, self);
 
         // If a <style> element is being removed, remove its sheet from the list
         if (el.is(Element.Html.Style)) |style| {
@@ -3131,11 +3140,8 @@ pub fn appendAllChildren(self: *Frame, parent: *Node, target: *Node) !void {
     self.domChanged();
     const dest_connected = target.isConnected();
 
-    // Use firstChild() instead of iterator to handle cases where callbacks
-    // (like custom element connectedCallback) modify the parent during iteration.
-    // The iterator captures "next" pointers that can become stale.
-    while (parent.firstChild()) |child| {
-        // Check if child was connected BEFORE removing it from parent
+    var it = parent.childrenIterator();
+    while (it.next()) |child| {
         const child_was_connected = child.isConnected();
         self.removeNode(parent, child, .{ .will_be_reconnected = dest_connected });
         try self.appendNode(target, child, .{ .child_already_connected = child_was_connected });
@@ -3146,31 +3152,16 @@ pub fn insertAllChildrenBefore(self: *Frame, fragment: *Node, parent: *Node, ref
     self.domChanged();
     const dest_connected = parent.isConnected();
 
-    // Use firstChild() instead of iterator to handle cases where callbacks
-    // (like custom element connectedCallback) modify the fragment during iteration.
-    // The iterator captures "next" pointers that can become stale.
-    while (fragment.firstChild()) |child| {
-        // Check if child was connected BEFORE removing it from fragment
+    var it = fragment.childrenIterator();
+    while (it.next()) |child| {
         const child_was_connected = child.isConnected();
         self.removeNode(fragment, child, .{ .will_be_reconnected = dest_connected });
-        // A callback fired by a previous iteration's insert (e.g. a custom
-        // element's connectedCallback) may have detached ref_node from
-        // parent. In that case, fall back to append so the remaining
-        // children still land in `parent` in source order.
-        if (ref_node._parent == parent) {
-            try self.insertNodeRelative(
-                parent,
-                child,
-                .{ .before = ref_node },
-                .{ .child_already_connected = child_was_connected },
-            );
-        } else {
-            try self.appendNode(
-                parent,
-                child,
-                .{ .child_already_connected = child_was_connected },
-            );
-        }
+        try self.insertNodeRelative(
+            parent,
+            child,
+            .{ .before = ref_node },
+            .{ .child_already_connected = child_was_connected },
+        );
     }
 }
 
@@ -3294,7 +3285,7 @@ pub fn _insertNodeRelative(self: *Frame, comptime from_parser: bool, parent: *No
                 if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
                     try self.addElementId(parent, el, id);
                 }
-                try Element.Html.Custom.invokeConnectedCallbackOnElement(true, el, self);
+                try Element.Html.Custom.enqueueConnectedCallbackOnElement(true, el, self);
             }
         }
         return;
@@ -3340,7 +3331,7 @@ pub fn _insertNodeRelative(self: *Frame, comptime from_parser: bool, parent: *No
         }
 
         if (should_invoke_connected) {
-            try Element.Html.Custom.invokeConnectedCallbackOnElement(false, el, self);
+            try Element.Html.Custom.enqueueConnectedCallbackOnElement(false, el, self);
         }
     }
 }
@@ -3350,7 +3341,7 @@ pub fn attributeChange(self: *Frame, element: *Element, name: String, value: Str
         log.err(.bug, "build.attributeChange", .{ .tag = element.getTag(), .name = name, .value = value, .err = err, .type = self._type, .url = self.url });
     };
 
-    Element.Html.Custom.invokeAttributeChangedCallbackOnElement(element, name, old_value, value, null, self);
+    Element.Html.Custom.enqueueAttributeChangedCallbackOnElement(element, name, old_value, value, null, self);
 
     var it: ?*std.DoublyLinkedList.Node = self._mutation_observers.first;
     while (it) |node| : (it = node.next) {
@@ -3376,7 +3367,7 @@ pub fn attributeRemove(self: *Frame, element: *Element, name: String, old_value:
         log.err(.bug, "build.attributeRemove", .{ .tag = element.getTag(), .name = name, .err = err, .type = self._type, .url = self.url });
     };
 
-    Element.Html.Custom.invokeAttributeChangedCallbackOnElement(element, name, old_value, null, null, self);
+    Element.Html.Custom.enqueueAttributeChangedCallbackOnElement(element, name, old_value, null, null, self);
 
     var it: ?*std.DoublyLinkedList.Node = self._mutation_observers.first;
     while (it) |node| : (it = node.next) {
diff --git a/src/browser/ScriptManagerBase.zig b/src/browser/ScriptManagerBase.zig
index 02e6dbdf..6d0a6800 100644
--- a/src/browser/ScriptManagerBase.zig
+++ b/src/browser/ScriptManagerBase.zig
@@ -749,6 +749,13 @@ pub const Script = struct {
         try_catch.init(local);
         defer try_catch.deinit();
 
+        // Custom-element reactions: the script body is a JS-execution
+        // boundary. Open a scope so any reactions it queues (or that were
+        // queued by the parser since the previous boundary) drain at the
+        // end of the script, before the parser resumes.
+        const ce_checkpoint = frame._ce_reactions.push();
+        defer frame._ce_reactions.popAndInvoke(ce_checkpoint, frame);
+
         const success = blk: {
             const content = self.source.content();
             switch (fe.kind) {
diff --git a/src/browser/js/Caller.zig b/src/browser/js/Caller.zig
index 313b62a6..48d24a78 100644
--- a/src/browser/js/Caller.zig
+++ b/src/browser/js/Caller.zig
@@ -570,6 +570,7 @@ pub const Function = struct {
         cache: ?Caching = null,
         embedded_receiver: bool = false,
         exposed: Exposed = .both,
+        ce_reactions: bool = false,
 
         pub const Exposed = enum { both, window, worker };
 
@@ -624,6 +625,26 @@ pub const Function = struct {
         caller.initWithContext(ctx, v8_context);
         defer caller.deinit();
 
+        // [CEReactions] entry: open a reactions scope so any custom-element
+        // callbacks queued by DOM mutation inside `func` fire after it
+        // returns, never mid-algorithm.
+        var ce_checkpoint: usize = undefined;
+        const ce_frame: ?*Frame = if (comptime opts.ce_reactions) switch (ctx.global) {
+            .frame => |frame| frame,
+            .worker => null,
+        } else null;
+
+        if (comptime opts.ce_reactions) {
+            if (ce_frame) |frame| {
+                ce_checkpoint = frame._ce_reactions.push();
+            }
+        }
+        defer if (comptime opts.ce_reactions) {
+            if (ce_frame) |frame| {
+                frame._ce_reactions.popAndInvoke(ce_checkpoint, frame);
+            }
+        };
+
         const js_value = _call(T, &caller.local, info, func, opts) catch |err| {
             handleError(T, @TypeOf(func), &caller.local, err, info, .{
                 .dom_exception = opts.dom_exception,
diff --git a/src/browser/js/bridge.zig b/src/browser/js/bridge.zig
index 5de1d1b1..901d2d2d 100644
--- a/src/browser/js/bridge.zig
+++ b/src/browser/js/bridge.zig
@@ -130,6 +130,18 @@ pub const Constructor = struct {
                     }
                     defer caller.deinit();
 
+                    // Constructors are a JS-execution boundary, just like
+                    // [CEReactions] methods. Open a reactions scope so any
+                    // callbacks queued by the user's constructor body (or
+                    // by attribute_changed reactions queued before invocation)
+                    // drain at the constructor's exit, not later.
+                    const ce_frame: ?*Frame = switch (caller.local.ctx.global) {
+                        .frame => |frame| frame,
+                        .worker => null,
+                    };
+                    const ce_checkpoint: usize = if (ce_frame) |frame| frame._ce_reactions.push() else 0;
+                    defer if (ce_frame) |frame| frame._ce_reactions.popAndInvoke(ce_checkpoint, frame);
+
                     caller.constructor(T, func, handle.?, .{
                         .dom_exception = opts.dom_exception,
                         .new_target = opts.new_target,
diff --git a/src/browser/parser/Parser.zig b/src/browser/parser/Parser.zig
index fe6e1219..5dcb8284 100644
--- a/src/browser/parser/Parser.zig
+++ b/src/browser/parser/Parser.zig
@@ -346,6 +346,8 @@ fn parseErrorCallback(ctx: *anyopaque, err: h5e.StringSlice) callconv(.c) void {
 
 fn popCallback(ctx: *anyopaque, node_ref: *anyopaque) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._popCallback(getNode(node_ref)) catch |err| {
         self.err = .{ .err = err, .source = .pop };
     };
@@ -368,6 +370,8 @@ fn createXMLElementCallback(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualNa
 
 fn _createElementCallbackWithDefaultnamespace(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator, default_namespace: Element.Namespace) ?*anyopaque {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     return self._createElementCallback(data, qname, attributes, default_namespace) catch |err| {
         self.err = .{ .err = err, .source = .create_element };
         return null;
@@ -390,6 +394,8 @@ fn _createElementCallback(self: *Parser, data: *anyopaque, qname: h5e.QualName,
 
 fn createCommentCallback(ctx: *anyopaque, str: h5e.StringSlice) callconv(.c) ?*anyopaque {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     return self._createCommentCallback(str.slice()) catch |err| {
         self.err = .{ .err = err, .source = .create_comment };
         return null;
@@ -408,6 +414,8 @@ fn _createCommentCallback(self: *Parser, str: []const u8) !*anyopaque {
 
 fn createProcessingInstruction(ctx: *anyopaque, target: h5e.StringSlice, data: h5e.StringSlice) callconv(.c) ?*anyopaque {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     return self._createProcessingInstruction(target.slice(), data.slice()) catch |err| {
         self.err = .{ .err = err, .source = .create_processing_instruction };
         return null;
@@ -426,6 +434,8 @@ fn _createProcessingInstruction(self: *Parser, target: []const u8, data: []const
 
 fn appendDoctypeToDocument(ctx: *anyopaque, name: h5e.StringSlice, public_id: h5e.StringSlice, system_id: h5e.StringSlice) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._appendDoctypeToDocument(name.slice(), public_id.slice(), system_id.slice()) catch |err| {
         self.err = .{ .err = err, .source = .append_doctype_to_document };
     };
@@ -448,6 +458,8 @@ fn _appendDoctypeToDocument(self: *Parser, name: []const u8, public_id: []const
 
 fn addAttrsIfMissingCallback(ctx: *anyopaque, target_ref: *anyopaque, attributes: h5e.AttributeIterator) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._addAttrsIfMissingCallback(getNode(target_ref), attributes) catch |err| {
         self.err = .{ .err = err, .source = .add_attrs_if_missing };
     };
@@ -497,6 +509,8 @@ fn getDataCallback(ctx: *anyopaque) callconv(.c) *anyopaque {
 
 fn appendCallback(ctx: *anyopaque, parent_ref: *anyopaque, node_or_text: h5e.NodeOrText) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._appendCallback(getNode(parent_ref), node_or_text) catch |err| {
         self.err = .{ .err = err, .source = .append };
     };
@@ -529,6 +543,8 @@ fn _appendCallback(self: *Parser, parent: *Node, node_or_text: h5e.NodeOrText) !
 
 fn removeFromParentCallback(ctx: *anyopaque, target_ref: *anyopaque) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._removeFromParentCallback(getNode(target_ref)) catch |err| {
         self.err = .{ .err = err, .source = .remove_from_parent };
     };
@@ -545,6 +561,8 @@ fn _removeFromParentCallback(self: *Parser, node: *Node) !void {
 
 fn reparentChildrenCallback(ctx: *anyopaque, node_ref: *anyopaque, new_parent_ref: *anyopaque) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._reparentChildrenCallback(getNode(node_ref), getNode(new_parent_ref)) catch |err| {
         self.err = .{ .err = err, .source = .reparent_children };
     };
@@ -559,6 +577,8 @@ fn _reparentChildrenCallback(self: *Parser, node: *Node, new_parent: *Node) !voi
 
 fn appendBeforeSiblingCallback(ctx: *anyopaque, sibling_ref: *anyopaque, node_or_text: h5e.NodeOrText) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._appendBeforeSiblingCallback(getNode(sibling_ref), node_or_text) catch |err| {
         self.err = .{ .err = err, .source = .append_before_sibling };
     };
@@ -587,6 +607,8 @@ fn _appendBeforeSiblingCallback(self: *Parser, sibling: *Node, node_or_text: h5e
 
 fn appendBasedOnParentNodeCallback(ctx: *anyopaque, element_ref: *anyopaque, prev_element_ref: *anyopaque, node_or_text: h5e.NodeOrText) callconv(.c) void {
     const self: *Parser = @ptrCast(@alignCast(ctx));
+    const cp = self.frame._ce_reactions.push();
+    defer self.frame._ce_reactions.popAndInvoke(cp, self.frame);
     self._appendBasedOnParentNodeCallback(getNode(element_ref), getNode(prev_element_ref), node_or_text) catch |err| {
         self.err = .{ .err = err, .source = .append_based_on_parent_node };
     };
diff --git a/src/browser/tests/custom_elements/mutation_during_callback.html b/src/browser/tests/custom_elements/mutation_during_callback.html
index bca44926..bacad4ba 100644
--- a/src/browser/tests/custom_elements/mutation_during_callback.html
+++ b/src/browser/tests/custom_elements/mutation_during_callback.html
@@ -2,19 +2,19 @@
 <body>
 <script src="../testing.js"></script>
 
-<!-- Regression: Frame.insertAllChildrenBefore (used by Element.outerHTML
-     setter) loops over fragment children and inserts each one .before
-     ref_node. _insertNodeRelative invokes connectedCallback for custom
-     elements, and that callback can detach ref_node from parent. The
-     next iteration must not panic on `ref_node._parent.? == parent`. -->
-<script id="outerHTML_callback_detaches_ref_node">
+<!-- Custom-element reactions queue during outerHTML's algorithm and fire
+     at the boundary, not mid-loop. By the time connectedCallback runs,
+     insertAllChildrenBefore has already inserted every fragment child
+     and setOuterHTML has detached the original `target`, so the callback
+     sees the post-state — its check observes target already detached and
+     leaves the DOM untouched. -->
+<script id="outerHTML_callback_observes_post_state">
 {
+    let targetParentAtCallback = undefined;
     class DetachTarget extends HTMLElement {
         connectedCallback() {
             const target = document.getElementById('outer_target');
-            if (target && target.parentNode) {
-                target.parentNode.removeChild(target);
-            }
+            targetParentAtCallback = target && target.parentNode;
         }
     }
     customElements.define('detach-target-1', DetachTarget);
@@ -26,60 +26,48 @@
     target.id = 'outer_target';
     wrap.appendChild(target);
 
-    // Two siblings: the first one's connectedCallback removes `target`
-    // (which is the ref_node passed to insertAllChildrenBefore). The
-    // second one then tries to insert before a parentless ref_node.
     target.outerHTML = '<detach-target-1></detach-target-1><b id="second">x</b>';
 
-    // We don't strictly care about the final shape, just that we got
-    // here without crashing. Sanity-check the first child landed.
+    // Both replacement children landed; the original target was removed
+    // before the queued connectedCallback ran.
     testing.expectTrue(wrap.querySelector('detach-target-1') !== null);
+    testing.expectTrue(wrap.querySelector('#second') !== null);
+    testing.expectEqual(null, targetParentAtCallback);
 }
 </script>
 
-<!-- Regression: Element.setInnerHTML removes existing children using
-     `childrenIterator()`. removeNode fires disconnectedCallback for
-     custom elements, and that callback can mutate the host's child
-     list, leaving the iterator advancing through a node that no longer
-     belongs to the parent. -->
-<script id="innerHTML_disconnected_mutates_siblings">
+<!-- innerHTML removes existing children, then parses and inserts the
+     new content. With queued reactions, the disconnectedCallbacks for
+     the removed elements fire after the whole algorithm completes — so
+     they observe `host` already populated with the new content. -->
+<script id="innerHTML_disconnected_observes_post_state">
 {
     let host;
-    let removeNextOnDisconnect = false;
-    class SiblingZapper extends HTMLElement {
+    let lastSeenChildCount = -1;
+    let lastSeenFirstTag = null;
+    class SiblingObserver extends HTMLElement {
         disconnectedCallback() {
-            if (!removeNextOnDisconnect) return;
-            removeNextOnDisconnect = false;
-            // Reach into the parent (captured via closure) to remove a
-            // sibling that the outer setInnerHTML loop is about to visit.
-            // The element being removed here is what the iterator's
-            // current node still points its `next` pointer at.
-            if (host.children.length > 0) {
-                host.removeChild(host.children[0]);
-            }
+            lastSeenChildCount = host.children.length;
+            lastSeenFirstTag = host.children.length > 0 ? host.children[0].tagName : null;
         }
     }
-    customElements.define('sibling-zapper-2', SiblingZapper);
+    customElements.define('sibling-zapper-2', SiblingObserver);
 
     host = document.createElement('div');
     document.body.appendChild(host);
 
-    const a = document.createElement('sibling-zapper-2');
-    const b = document.createElement('sibling-zapper-2');
-    const c = document.createElement('span');
-    host.appendChild(a);
-    host.appendChild(b);
-    host.appendChild(c);
+    host.appendChild(document.createElement('sibling-zapper-2'));
+    host.appendChild(document.createElement('sibling-zapper-2'));
+    host.appendChild(document.createElement('span'));
 
-    removeNextOnDisconnect = true;
-
-    // Triggers the removal loop in setInnerHTML. Removing `a` fires its
-    // disconnectedCallback, which removes `b` (the iterator's next
-    // target). The loop must not visit a node whose `_parent` is null.
     host.innerHTML = '<i>after</i>';
 
+    // The disconnectedCallback fires after innerHTML completes; by then
+    // the new <i> is already in place.
     testing.expectEqual(1, host.children.length);
     testing.expectEqual('I', host.children[0].tagName);
+    testing.expectEqual(1, lastSeenChildCount);
+    testing.expectEqual('I', lastSeenFirstTag);
 }
 </script>
 </body>
diff --git a/src/browser/tests/node/append_child.html b/src/browser/tests/node/append_child.html
index 48bffe91..20c98987 100644
--- a/src/browser/tests/node/append_child.html
+++ b/src/browser/tests/node/append_child.html
@@ -31,18 +31,19 @@
 
 <div id=d3></div>
 <script id=appendChild_fragment_mutation>
-  // Test that appendChild with DocumentFragment handles synchronous callbacks
-  // (like custom element connectedCallback) that modify the fragment during iteration.
-  // This reproduces a bug where the iterator captures "next" node pointers
-  // before processing, but callbacks can remove those nodes from the fragment.
+  // Custom-element reactions are queued during the appendChild algorithm
+  // and fire after it completes. The connectedCallback below sees the
+  // post-move DOM state — both fragment children are already in d3 — so
+  // its check `b.parentNode === fragment` is false and it leaves b alone.
   const d3 = $('#d3');
   const fragment = document.createDocumentFragment();
 
-  // Create custom element whose connectedCallback modifies the fragment
   let bElement = null;
+  let parentSeenAtCallback = null;
   class ModifyingElement extends HTMLElement {
     connectedCallback() {
-      // When this element is connected, remove 'b' from the fragment
+      // Callback fires after the move; record what we observe.
+      parentSeenAtCallback = bElement && bElement.parentNode;
       if (bElement && bElement.parentNode === fragment) {
         fragment.removeChild(bElement);
       }
@@ -58,39 +59,37 @@
   fragment.appendChild(a);
   fragment.appendChild(b);
 
-  // This should not crash - appendChild should handle the modification gracefully
   d3.appendChild(fragment);
 
-  // 'a' should be in d3, 'b' was removed by connectedCallback and is now detached
-  assertChildren(['a'], d3);
-  testing.expectEqual(null, b.parentNode);
+  // Both moved atomically. Callback observed b already in d3.
+  assertChildren(['a', 'b'], d3);
+  testing.expectEqual(d3, parentSeenAtCallback);
 </script>
 
 <div id=d4></div>
 <div id=d4_stash></div>
-<script id=appendChild_disconnect_callback_reparents>
-  // Moving a connected child into a disconnected target makes
-  // will_be_reconnected=false, so disconnectedCallback fires synchronously
-  // inside removeNode. The callback re-parents the child; appendChild
-  // respects that placement instead of overriding it.
+<script id=appendChild_disconnect_callback_observes_post_move>
+  // Custom-element reactions queue and drain at the algorithm boundary, so
+  // disconnectedCallback fires after the whole move completes. By then the
+  // element is already in its new (disconnected) parent — the callback
+  // observes the post-move state, never a parentless intermediate.
   const d4 = $('#d4');
-  const stash = $('#d4_stash');
 
-  class ReparentOnDisconnect extends HTMLElement {
+  let parentSeenAtDisconnect = undefined;
+  class ObserveOnDisconnect extends HTMLElement {
     disconnectedCallback() {
-      if (this.parentNode === null) {
-        stash.appendChild(this);
-      }
+      parentSeenAtDisconnect = this.parentNode;
     }
   }
-  customElements.define('reparent-on-disconnect', ReparentOnDisconnect);
+  customElements.define('observe-on-disconnect', ObserveOnDisconnect);
 
-  const rpd = document.createElement('reparent-on-disconnect');
-  rpd.id = 'rpd';
-  d4.appendChild(rpd);
+  const ood = document.createElement('observe-on-disconnect');
+  ood.id = 'ood';
+  d4.appendChild(ood);
 
   const detached = document.createElement('div');
-  detached.appendChild(rpd);
+  detached.appendChild(ood);
 
-  testing.expectEqual(stash, rpd.parentNode);
+  testing.expectEqual(detached, ood.parentNode);
+  testing.expectEqual(detached, parentSeenAtDisconnect);
 </script>
diff --git a/src/browser/tests/node/insert_before.html b/src/browser/tests/node/insert_before.html
index 1018c314..7909d346 100644
--- a/src/browser/tests/node/insert_before.html
+++ b/src/browser/tests/node/insert_before.html
@@ -42,21 +42,18 @@
 
 <div id=d3></div>
 <div id=d3_stash></div>
-<script id=insertBefore_disconnect_callback_reparents>
-  // Same disconnectedCallback re-parenting pattern as in append_child.html,
-  // exercised through insertBefore. insertBefore respects the callback's
-  // placement instead of overriding it.
+<script id=insertBefore_disconnect_callback_observes_post_move>
+  // disconnectedCallback fires after insertBefore completes, so the
+  // callback observes the element already placed in its new parent.
   const d3 = $('#d3');
-  const stash = $('#d3_stash');
 
-  class IBReparentOnDisconnect extends HTMLElement {
+  let parentSeenAtDisconnect = undefined;
+  class IBObserveOnDisconnect extends HTMLElement {
     disconnectedCallback() {
-      if (this.parentNode === null) {
-        stash.appendChild(this);
-      }
+      parentSeenAtDisconnect = this.parentNode;
     }
   }
-  customElements.define('ib-reparent-on-disconnect', IBReparentOnDisconnect);
+  customElements.define('ib-reparent-on-disconnect', IBObserveOnDisconnect);
 
   const moving = document.createElement('ib-reparent-on-disconnect');
   moving.id = 'ib_moving';
@@ -68,5 +65,6 @@
 
   detached.insertBefore(moving, ref);
 
-  testing.expectEqual(stash, moving.parentNode);
+  testing.expectEqual(detached, moving.parentNode);
+  testing.expectEqual(detached, parentSeenAtDisconnect);
 </script>
diff --git a/src/browser/webapi/CData.zig b/src/browser/webapi/CData.zig
index 0e793afb..f3627802 100644
--- a/src/browser/webapi/CData.zig
+++ b/src/browser/webapi/CData.zig
@@ -423,19 +423,19 @@ pub const JsApi = struct {
         pub const enumerable = false;
     };
 
-    pub const data = bridge.accessor(CData.getData, CData._setData, .{});
+    pub const data = bridge.accessor(CData.getData, CData._setData, .{ .ce_reactions = true });
     pub const length = bridge.accessor(CData.getLength, null, .{});
 
-    pub const appendData = bridge.function(CData.appendData, .{});
-    pub const deleteData = bridge.function(CData.deleteData, .{ .dom_exception = true });
-    pub const insertData = bridge.function(CData.insertData, .{ .dom_exception = true });
-    pub const replaceData = bridge.function(CData.replaceData, .{ .dom_exception = true });
+    pub const appendData = bridge.function(CData.appendData, .{ .ce_reactions = true });
+    pub const deleteData = bridge.function(CData.deleteData, .{ .dom_exception = true, .ce_reactions = true });
+    pub const insertData = bridge.function(CData.insertData, .{ .dom_exception = true, .ce_reactions = true });
+    pub const replaceData = bridge.function(CData.replaceData, .{ .dom_exception = true, .ce_reactions = true });
     pub const substringData = bridge.function(CData.substringData, .{ .dom_exception = true });
 
-    pub const remove = bridge.function(CData.remove, .{});
-    pub const before = bridge.function(CData.before, .{});
-    pub const after = bridge.function(CData.after, .{});
-    pub const replaceWith = bridge.function(CData.replaceWith, .{});
+    pub const remove = bridge.function(CData.remove, .{ .ce_reactions = true });
+    pub const before = bridge.function(CData.before, .{ .ce_reactions = true });
+    pub const after = bridge.function(CData.after, .{ .ce_reactions = true });
+    pub const replaceWith = bridge.function(CData.replaceWith, .{ .ce_reactions = true });
 
     pub const nextElementSibling = bridge.accessor(CData.nextElementSibling, null, .{});
     pub const previousElementSibling = bridge.accessor(CData.previousElementSibling, null, .{});
diff --git a/src/browser/webapi/CustomElementRegistry.zig b/src/browser/webapi/CustomElementRegistry.zig
index ecd6c546..414ded3a 100644
--- a/src/browser/webapi/CustomElementRegistry.zig
+++ b/src/browser/webapi/CustomElementRegistry.zig
@@ -190,17 +190,20 @@ pub fn upgradeCustomElement(custom: *Custom, definition: *CustomElementDefinitio
         return error.CustomElementUpgradeFailed;
     };
 
-    // Invoke attributeChangedCallback for existing observed attributes
-    var attr_it = custom.asElement().attributeIterator();
+    // Enqueue attributeChangedCallback for existing observed attributes
+    const element = custom.asElement();
+    var attr_it = element.attributeIterator();
     while (attr_it.next()) |attr| {
         const name = attr._name;
         if (definition.isAttributeObserved(name)) {
-            custom.invokeAttributeChangedCallback(name, null, attr._value, null, frame);
+            Custom.enqueueAttributeChangedCallbackOnElement(element, name, null, attr._value, null, frame);
         }
     }
 
     if (node.isConnected()) {
-        custom.invokeConnectedCallback(frame);
+        Custom.enqueueConnectedCallbackOnElement(false, element, frame) catch |err| {
+            log.warn(.bug, "ce_reactions enqueue fail", .{ .err = err });
+        };
     }
 }
 
diff --git a/src/browser/webapi/DOMParser.zig b/src/browser/webapi/DOMParser.zig
index d0356803..8ab2fb9d 100644
--- a/src/browser/webapi/DOMParser.zig
+++ b/src/browser/webapi/DOMParser.zig
@@ -129,7 +129,7 @@ pub const JsApi = struct {
     };
 
     pub const constructor = bridge.constructor(DOMParser.init, .{});
-    pub const parseFromString = bridge.function(DOMParser.parseFromString, .{});
+    pub const parseFromString = bridge.function(DOMParser.parseFromString, .{ .ce_reactions = true });
 };
 
 const testing = @import("../../testing.zig");
diff --git a/src/browser/webapi/Document.zig b/src/browser/webapi/Document.zig
index 4a3d718a..2842de1e 100644
--- a/src/browser/webapi/Document.zig
+++ b/src/browser/webapi/Document.zig
@@ -1162,15 +1162,15 @@ pub const JsApi = struct {
     pub const getSelection = bridge.function(Document.getSelection, .{});
     pub const getElementsByClassName = bridge.function(Document.getElementsByClassName, .{});
     pub const getElementsByName = bridge.function(Document.getElementsByName, .{});
-    pub const adoptNode = bridge.function(Document.adoptNode, .{ .dom_exception = true });
-    pub const importNode = bridge.function(Document.importNode, .{ .dom_exception = true });
-    pub const append = bridge.function(Document.append, .{ .dom_exception = true });
-    pub const prepend = bridge.function(Document.prepend, .{ .dom_exception = true });
-    pub const replaceChildren = bridge.function(Document.replaceChildren, .{ .dom_exception = true });
+    pub const adoptNode = bridge.function(Document.adoptNode, .{ .dom_exception = true, .ce_reactions = true });
+    pub const importNode = bridge.function(Document.importNode, .{ .dom_exception = true, .ce_reactions = true });
+    pub const append = bridge.function(Document.append, .{ .dom_exception = true, .ce_reactions = true });
+    pub const prepend = bridge.function(Document.prepend, .{ .dom_exception = true, .ce_reactions = true });
+    pub const replaceChildren = bridge.function(Document.replaceChildren, .{ .dom_exception = true, .ce_reactions = true });
     pub const elementFromPoint = bridge.function(Document.elementFromPoint, .{});
     pub const elementsFromPoint = bridge.function(Document.elementsFromPoint, .{});
-    pub const write = bridge.function(Document.write, .{ .dom_exception = true });
-    pub const writeln = bridge.function(Document.writeln, .{ .dom_exception = true });
+    pub const write = bridge.function(Document.write, .{ .dom_exception = true, .ce_reactions = true });
+    pub const writeln = bridge.function(Document.writeln, .{ .dom_exception = true, .ce_reactions = true });
     pub const open = bridge.function(Document.open, .{ .dom_exception = true });
     pub const close = bridge.function(Document.close, .{ .dom_exception = true });
     pub const doctype = bridge.accessor(Document.getDocType, null, .{});
diff --git a/src/browser/webapi/DocumentFragment.zig b/src/browser/webapi/DocumentFragment.zig
index b55050f2..cc692649 100644
--- a/src/browser/webapi/DocumentFragment.zig
+++ b/src/browser/webapi/DocumentFragment.zig
@@ -239,10 +239,10 @@ pub const JsApi = struct {
     pub const childElementCount = bridge.accessor(DocumentFragment.getChildElementCount, null, .{});
     pub const firstElementChild = bridge.accessor(DocumentFragment.firstElementChild, null, .{});
     pub const lastElementChild = bridge.accessor(DocumentFragment.lastElementChild, null, .{});
-    pub const append = bridge.function(DocumentFragment.append, .{ .dom_exception = true });
-    pub const prepend = bridge.function(DocumentFragment.prepend, .{ .dom_exception = true });
-    pub const replaceChildren = bridge.function(DocumentFragment.replaceChildren, .{ .dom_exception = true });
-    pub const innerHTML = bridge.accessor(_innerHTML, DocumentFragment.setInnerHTML, .{});
+    pub const append = bridge.function(DocumentFragment.append, .{ .dom_exception = true, .ce_reactions = true });
+    pub const prepend = bridge.function(DocumentFragment.prepend, .{ .dom_exception = true, .ce_reactions = true });
+    pub const replaceChildren = bridge.function(DocumentFragment.replaceChildren, .{ .dom_exception = true, .ce_reactions = true });
+    pub const innerHTML = bridge.accessor(_innerHTML, DocumentFragment.setInnerHTML, .{ .ce_reactions = true });
 
     fn _innerHTML(self: *DocumentFragment, frame: *Frame) ![]const u8 {
         var buf = std.Io.Writer.Allocating.init(frame.call_arena);
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 787751a8..98eef93a 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -474,11 +474,7 @@ pub fn setOuterHTML(self: *Element, html: []const u8, frame: *Frame) !void {
         try frame.insertAllChildrenBefore(fragment, parent, node);
     }
 
-    // A custom element callback fired during insertAllChildrenBefore may
-    // have already detached `node`; only remove it if it's still here.
-    if (node._parent == parent) {
-        frame.removeNode(parent, node, .{ .will_be_reconnected = false });
-    }
+    frame.removeNode(parent, node, .{ .will_be_reconnected = false });
 }
 
 pub fn getInnerHTML(self: *Element, writer: *std.Io.Writer, frame: *Frame) !void {
@@ -489,21 +485,16 @@ pub fn getInnerHTML(self: *Element, writer: *std.Io.Writer, frame: *Frame) !void
 pub fn setInnerHTML(self: *Element, html: []const u8, frame: *Frame) !void {
     const parent = self.asNode();
 
-    // Remove all existing children. Drain via firstChild(): removeNode
-    // fires disconnectedCallback for custom elements, which can mutate
-    // the child list and dangle any cached next-pointer the iterator
-    // would otherwise hold.
     frame.domChanged();
-    while (parent.firstChild()) |child| {
+    var it = parent.childrenIterator();
+    while (it.next()) |child| {
         frame.removeNode(parent, child, .{ .will_be_reconnected = false });
     }
 
-    // Fast path: skip parsing if html is empty
     if (html.len == 0) {
         return;
     }
 
-    // Parse and add new children
     try frame.parseHtmlAsChildren(parent, html);
 }
 
@@ -1743,21 +1734,21 @@ pub const JsApi = struct {
     }
     pub const namespaceURI = bridge.accessor(Element.getNamespaceURI, null, .{});
 
-    pub const innerText = bridge.accessor(_innerText, Element.setInnerText, .{});
+    pub const innerText = bridge.accessor(_innerText, Element.setInnerText, .{ .ce_reactions = true });
     fn _innerText(self: *Element, frame: *const Frame) ![]const u8 {
         var buf = std.Io.Writer.Allocating.init(frame.call_arena);
         try self.getInnerText(&buf.writer);
         return buf.written();
     }
 
-    pub const outerHTML = bridge.accessor(_outerHTML, Element.setOuterHTML, .{});
+    pub const outerHTML = bridge.accessor(_outerHTML, Element.setOuterHTML, .{ .ce_reactions = true });
     fn _outerHTML(self: *Element, frame: *Frame) ![]const u8 {
         var buf = std.Io.Writer.Allocating.init(frame.call_arena);
         try self.getOuterHTML(&buf.writer, frame);
         return buf.written();
     }
 
-    pub const innerHTML = bridge.accessor(_innerHTML, Element.setInnerHTML, .{});
+    pub const innerHTML = bridge.accessor(_innerHTML, Element.setInnerHTML, .{ .ce_reactions = true });
     fn _innerHTML(self: *Element, frame: *Frame) ![]const u8 {
         var buf = std.Io.Writer.Allocating.init(frame.call_arena);
         try self.getInnerHTML(&buf.writer, frame);
@@ -1766,24 +1757,24 @@ pub const JsApi = struct {
 
     pub const prefix = bridge.accessor(Element._prefix, null, .{});
 
-    pub const setAttribute = bridge.function(_setAttribute, .{ .dom_exception = true });
+    pub const setAttribute = bridge.function(_setAttribute, .{ .dom_exception = true, .ce_reactions = true });
     fn _setAttribute(self: *Element, name: String, value: js.Value, frame: *Frame) !void {
         return self.setAttribute(name, .wrap(try value.toStringSlice()), frame);
     }
 
-    pub const setAttributeNS = bridge.function(_setAttributeNS, .{ .dom_exception = true });
+    pub const setAttributeNS = bridge.function(_setAttributeNS, .{ .dom_exception = true, .ce_reactions = true });
     fn _setAttributeNS(self: *Element, maybe_ns: ?[]const u8, qn: []const u8, value: js.Value, frame: *Frame) !void {
         return self.setAttributeNS(maybe_ns, qn, .wrap(try value.toStringSlice()), frame);
     }
 
     pub const localName = bridge.accessor(Element.getLocalName, null, .{});
-    pub const id = bridge.accessor(Element.getId, Element.setId, .{});
-    pub const slot = bridge.accessor(Element.getSlot, Element.setSlot, .{});
-    pub const ariaAtomic = bridge.accessor(Element.getAriaAtomic, Element.setAriaAtomic, .{});
-    pub const ariaLive = bridge.accessor(Element.getAriaLive, Element.setAriaLive, .{});
-    pub const dir = bridge.accessor(Element.getDir, Element.setDir, .{});
-    pub const className = bridge.accessor(Element.getClassName, Element.setClassName, .{});
-    pub const classList = bridge.accessor(Element.getClassList, Element.setClassList, .{});
+    pub const id = bridge.accessor(Element.getId, Element.setId, .{ .ce_reactions = true });
+    pub const slot = bridge.accessor(Element.getSlot, Element.setSlot, .{ .ce_reactions = true });
+    pub const ariaAtomic = bridge.accessor(Element.getAriaAtomic, Element.setAriaAtomic, .{ .ce_reactions = true });
+    pub const ariaLive = bridge.accessor(Element.getAriaLive, Element.setAriaLive, .{ .ce_reactions = true });
+    pub const dir = bridge.accessor(Element.getDir, Element.setDir, .{ .ce_reactions = true });
+    pub const className = bridge.accessor(Element.getClassName, Element.setClassName, .{ .ce_reactions = true });
+    pub const classList = bridge.accessor(Element.getClassList, Element.setClassList, .{ .ce_reactions = true });
     pub const dataset = bridge.accessor(Element.getDataset, null, .{});
     pub const style = bridge.accessor(Element.getOrCreateStyle, null, .{});
     pub const attributes = bridge.accessor(Element.getAttributeNamedNodeMap, null, .{});
@@ -1792,17 +1783,17 @@ pub const JsApi = struct {
     pub const getAttribute = bridge.function(Element.getAttribute, .{});
     pub const getAttributeNS = bridge.function(Element.getAttributeNS, .{});
     pub const getAttributeNode = bridge.function(Element.getAttributeNode, .{});
-    pub const setAttributeNode = bridge.function(Element.setAttributeNode, .{});
-    pub const removeAttribute = bridge.function(Element.removeAttribute, .{});
-    pub const toggleAttribute = bridge.function(Element.toggleAttribute, .{ .dom_exception = true });
+    pub const setAttributeNode = bridge.function(Element.setAttributeNode, .{ .ce_reactions = true });
+    pub const removeAttribute = bridge.function(Element.removeAttribute, .{ .ce_reactions = true });
+    pub const toggleAttribute = bridge.function(Element.toggleAttribute, .{ .dom_exception = true, .ce_reactions = true });
     pub const getAttributeNames = bridge.function(Element.getAttributeNames, .{});
-    pub const removeAttributeNode = bridge.function(Element.removeAttributeNode, .{ .dom_exception = true });
+    pub const removeAttributeNode = bridge.function(Element.removeAttributeNode, .{ .dom_exception = true, .ce_reactions = true });
     pub const shadowRoot = bridge.accessor(Element.getShadowRoot, null, .{});
     pub const assignedSlot = bridge.accessor(Element.getAssignedSlot, null, .{});
     pub const attachShadow = bridge.function(_attachShadow, .{ .dom_exception = true });
-    pub const insertAdjacentHTML = bridge.function(Element.insertAdjacentHTML, .{ .dom_exception = true });
-    pub const insertAdjacentElement = bridge.function(Element.insertAdjacentElement, .{ .dom_exception = true });
-    pub const insertAdjacentText = bridge.function(Element.insertAdjacentText, .{ .dom_exception = true });
+    pub const insertAdjacentHTML = bridge.function(Element.insertAdjacentHTML, .{ .dom_exception = true, .ce_reactions = true });
+    pub const insertAdjacentElement = bridge.function(Element.insertAdjacentElement, .{ .dom_exception = true, .ce_reactions = true });
+    pub const insertAdjacentText = bridge.function(Element.insertAdjacentText, .{ .dom_exception = true, .ce_reactions = true });
 
     const ShadowRootInit = struct {
         mode: []const u8,
@@ -1810,13 +1801,13 @@ pub const JsApi = struct {
     fn _attachShadow(self: *Element, init: ShadowRootInit, frame: *Frame) !*ShadowRoot {
         return self.attachShadow(init.mode, frame);
     }
-    pub const replaceChildren = bridge.function(Element.replaceChildren, .{ .dom_exception = true });
-    pub const replaceWith = bridge.function(Element.replaceWith, .{ .dom_exception = true });
-    pub const remove = bridge.function(Element.remove, .{});
-    pub const append = bridge.function(Element.append, .{ .dom_exception = true });
-    pub const prepend = bridge.function(Element.prepend, .{ .dom_exception = true });
-    pub const before = bridge.function(Element.before, .{ .dom_exception = true });
-    pub const after = bridge.function(Element.after, .{ .dom_exception = true });
+    pub const replaceChildren = bridge.function(Element.replaceChildren, .{ .dom_exception = true, .ce_reactions = true });
+    pub const replaceWith = bridge.function(Element.replaceWith, .{ .dom_exception = true, .ce_reactions = true });
+    pub const remove = bridge.function(Element.remove, .{ .ce_reactions = true });
+    pub const append = bridge.function(Element.append, .{ .dom_exception = true, .ce_reactions = true });
+    pub const prepend = bridge.function(Element.prepend, .{ .dom_exception = true, .ce_reactions = true });
+    pub const before = bridge.function(Element.before, .{ .dom_exception = true, .ce_reactions = true });
+    pub const after = bridge.function(Element.after, .{ .dom_exception = true, .ce_reactions = true });
     pub const firstElementChild = bridge.accessor(Element.firstElementChild, null, .{});
     pub const lastElementChild = bridge.accessor(Element.lastElementChild, null, .{});
     pub const nextElementSibling = bridge.accessor(Element.nextElementSibling, null, .{});
diff --git a/src/browser/webapi/Node.zig b/src/browser/webapi/Node.zig
index c26411ed..00779af0 100644
--- a/src/browser/webapi/Node.zig
+++ b/src/browser/webapi/Node.zig
@@ -253,11 +253,6 @@ pub fn appendChild(self: *Node, child: *Node, frame: *Frame) !*Node {
         try frame.adoptNodeTree(child, child_owner.?, parent_owner);
     }
 
-    // A custom element callback can re-parent the node. If it does, we're done
-    if (child._parent != null) {
-        return child;
-    }
-
     try frame.appendNode(self, child, .{
         .child_already_connected = child_connected,
         .adopting_to_new_document = adopting_to_new_document,
@@ -620,22 +615,6 @@ pub fn insertBefore(self: *Node, new_node: *Node, ref_node_: ?*Node, frame: *Fra
         try frame.adoptNodeTree(new_node, child_owner.?, parent_owner);
     }
 
-    // See Node.appendChild: a callback above (disconnectedCallback or
-    // adoptedCallback) can re-parent new_node. Let that placement stand.
-    if (new_node._parent != null) {
-        return new_node;
-    }
-
-    // The same callback could also have detached ref_node from self. Fall
-    // back to append so new_node still lands in self.
-    if (ref_node._parent != self) {
-        try frame.appendNode(self, new_node, .{
-            .child_already_connected = child_already_connected,
-            .adopting_to_new_document = adopting_to_new_document,
-        });
-        return new_node;
-    }
-
     try frame.insertNodeRelative(
         self,
         new_node,
@@ -658,11 +637,8 @@ pub fn replaceChild(self: *Node, new_child: *Node, old_child: *Node, frame: *Fra
 
     _ = try self.insertBefore(new_child, old_child, frame);
 
-    // Special case: if we replace a node by itself, we don't remove it.
-    // insertBefore is an noop in this case.
-    // Re-check parent after insertBefore since callbacks (e.g. connectedCallback)
-    // could have already removed old_child from self.
-    if (new_child != old_child and old_child._parent == self) {
+    // Special case: if we replace a node by itself, insertBefore was a noop.
+    if (new_child != old_child) {
         frame.removeNode(self, old_child, .{ .will_be_reconnected = false });
     }
 
@@ -1163,7 +1139,7 @@ pub const JsApi = struct {
     }.wrap, null, .{});
     pub const nodeType = bridge.accessor(Node.getNodeType, null, .{});
 
-    pub const textContent = bridge.accessor(_textContext, Node.setTextContent, .{});
+    pub const textContent = bridge.accessor(_textContext, Node.setTextContent, .{ .ce_reactions = true });
     fn _textContext(self: *Node, frame: *const Frame) !?[]const u8 {
         // cdata and attributes can return value directly, avoiding the copy
         switch (self._type) {
@@ -1185,19 +1161,19 @@ pub const JsApi = struct {
     pub const previousSibling = bridge.accessor(Node.previousSibling, null, .{});
     pub const parentNode = bridge.accessor(Node.parentNode, null, .{});
     pub const parentElement = bridge.accessor(Node.parentElement, null, .{});
-    pub const appendChild = bridge.function(Node.appendChild, .{ .dom_exception = true });
+    pub const appendChild = bridge.function(Node.appendChild, .{ .dom_exception = true, .ce_reactions = true });
     pub const childNodes = bridge.accessor(Node.childNodes, null, .{ .cache = .{ .private = "child_nodes" } });
     pub const isConnected = bridge.accessor(Node.isConnected, null, .{});
     pub const ownerDocument = bridge.accessor(Node.ownerDocument, null, .{});
     pub const hasChildNodes = bridge.function(Node.hasChildNodes, .{});
     pub const isSameNode = bridge.function(Node.isSameNode, .{});
     pub const contains = bridge.function(Node.contains, .{});
-    pub const removeChild = bridge.function(Node.removeChild, .{ .dom_exception = true });
-    pub const nodeValue = bridge.accessor(Node.getNodeValue, Node.setNodeValue, .{});
-    pub const insertBefore = bridge.function(Node.insertBefore, .{ .dom_exception = true });
-    pub const replaceChild = bridge.function(Node.replaceChild, .{ .dom_exception = true });
-    pub const normalize = bridge.function(Node.normalize, .{});
-    pub const cloneNode = bridge.function(Node.cloneNode, .{ .dom_exception = true });
+    pub const removeChild = bridge.function(Node.removeChild, .{ .dom_exception = true, .ce_reactions = true });
+    pub const nodeValue = bridge.accessor(Node.getNodeValue, Node.setNodeValue, .{ .ce_reactions = true });
+    pub const insertBefore = bridge.function(Node.insertBefore, .{ .dom_exception = true, .ce_reactions = true });
+    pub const replaceChild = bridge.function(Node.replaceChild, .{ .dom_exception = true, .ce_reactions = true });
+    pub const normalize = bridge.function(Node.normalize, .{ .ce_reactions = true });
+    pub const cloneNode = bridge.function(Node.cloneNode, .{ .dom_exception = true, .ce_reactions = true });
     pub const compareDocumentPosition = bridge.function(Node.compareDocumentPosition, .{});
     pub const getRootNode = bridge.function(Node.getRootNode, .{});
     pub const isEqualNode = bridge.function(Node.isEqualNode, .{});
diff --git a/src/browser/webapi/collections/DOMTokenList.zig b/src/browser/webapi/collections/DOMTokenList.zig
index 3499aca9..88acb166 100644
--- a/src/browser/webapi/collections/DOMTokenList.zig
+++ b/src/browser/webapi/collections/DOMTokenList.zig
@@ -311,11 +311,11 @@ pub const JsApi = struct {
     }
 
     pub const contains = bridge.function(DOMTokenList.contains, .{ .dom_exception = true });
-    pub const add = bridge.function(DOMTokenList.add, .{ .dom_exception = true });
-    pub const remove = bridge.function(DOMTokenList.remove, .{ .dom_exception = true });
-    pub const toggle = bridge.function(DOMTokenList.toggle, .{ .dom_exception = true });
-    pub const replace = bridge.function(DOMTokenList.replace, .{ .dom_exception = true });
-    pub const value = bridge.accessor(DOMTokenList.getValue, DOMTokenList.setValue, .{});
+    pub const add = bridge.function(DOMTokenList.add, .{ .dom_exception = true, .ce_reactions = true });
+    pub const remove = bridge.function(DOMTokenList.remove, .{ .dom_exception = true, .ce_reactions = true });
+    pub const toggle = bridge.function(DOMTokenList.toggle, .{ .dom_exception = true, .ce_reactions = true });
+    pub const replace = bridge.function(DOMTokenList.replace, .{ .dom_exception = true, .ce_reactions = true });
+    pub const value = bridge.accessor(DOMTokenList.getValue, DOMTokenList.setValue, .{ .ce_reactions = true });
     pub const toString = bridge.function(DOMTokenList.getValue, .{});
     pub const keys = bridge.function(DOMTokenList.keys, .{});
     pub const values = bridge.function(DOMTokenList.values, .{});
diff --git a/src/browser/webapi/element/Attribute.zig b/src/browser/webapi/element/Attribute.zig
index c0d4d053..28109eb9 100644
--- a/src/browser/webapi/element/Attribute.zig
+++ b/src/browser/webapi/element/Attribute.zig
@@ -104,7 +104,7 @@ pub const JsApi = struct {
 
     pub const name = bridge.accessor(Attribute.getName, null, .{});
     pub const localName = bridge.accessor(Attribute.getName, null, .{});
-    pub const value = bridge.accessor(Attribute.getValue, Attribute.setValue, .{});
+    pub const value = bridge.accessor(Attribute.getValue, Attribute.setValue, .{ .ce_reactions = true });
     pub const namespaceURI = bridge.accessor(Attribute.getNamespaceURI, null, .{});
     pub const ownerElement = bridge.accessor(Attribute.getOwnerElement, null, .{});
 };
@@ -538,8 +538,8 @@ pub const NamedNodeMap = struct {
         pub const @"[int]" = bridge.indexed(NamedNodeMap.getAtIndex, null, .{ .null_as_undefined = true });
         pub const @"[str]" = bridge.namedIndexed(NamedNodeMap.getByName, null, null, .{ .null_as_undefined = true });
         pub const getNamedItem = bridge.function(NamedNodeMap.getByName, .{});
-        pub const setNamedItem = bridge.function(NamedNodeMap.set, .{});
-        pub const removeNamedItem = bridge.function(NamedNodeMap.removeByName, .{});
+        pub const setNamedItem = bridge.function(NamedNodeMap.set, .{ .ce_reactions = true });
+        pub const removeNamedItem = bridge.function(NamedNodeMap.removeByName, .{ .ce_reactions = true });
         pub const item = bridge.function(_item, .{});
         fn _item(self: *const NamedNodeMap, index: i32, frame: *Frame) !?*Attribute {
             // the bridge.indexed handles this, so if we want
diff --git a/src/browser/webapi/element/html/Custom.zig b/src/browser/webapi/element/html/Custom.zig
index 630312f9..4b1944f0 100644
--- a/src/browser/webapi/element/html/Custom.zig
+++ b/src/browser/webapi/element/html/Custom.zig
@@ -27,6 +27,7 @@ const Element = @import("../../Element.zig");
 const Document = @import("../../Document.zig");
 const HtmlElement = @import("../Html.zig");
 const CustomElementDefinition = @import("../../CustomElementDefinition.zig");
+const Reaction = @import("../../../CustomElementReactions.zig").Reaction;
 
 const log = lp.log;
 const String = lp.String;
@@ -45,53 +46,18 @@ pub fn asNode(self: *Custom) *Node {
     return self.asElement().asNode();
 }
 
-pub fn invokeConnectedCallback(self: *Custom, frame: *Frame) void {
-    // Only invoke if we haven't already called it while connected
-    if (self._connected_callback_invoked) {
-        return;
-    }
+// Reactions are queued via enqueue* and fired via fireReaction at the outer
+// CEReactions boundary (set up by the JS bridge, the parser pump, etc.).
+//
+// Dedup happens at enqueue time: the connected/disconnected flags flip when
+// we queue a reaction so that a redundant enqueue (already-in-this-state)
+// is dropped, and a remove+re-insert in the same scope queues both reactions
+// in order. Fire-time is unconditional.
 
-    self._connected_callback_invoked = true;
-    self._disconnected_callback_invoked = false;
-    self.invokeCallback("connectedCallback", .{}, frame);
-}
-
-pub fn invokeDisconnectedCallback(self: *Custom, frame: *Frame) void {
-    // Only invoke if we haven't already called it while disconnected
-    if (self._disconnected_callback_invoked) {
-        return;
-    }
-
-    self._disconnected_callback_invoked = true;
-    self._connected_callback_invoked = false;
-    self.invokeCallback("disconnectedCallback", .{}, frame);
-}
-
-pub fn invokeAttributeChangedCallback(self: *Custom, name: String, old_value: ?String, new_value: ?String, namespace: ?String, frame: *Frame) void {
-    const definition = self._definition orelse return;
-    if (!definition.isAttributeObserved(name)) {
-        return;
-    }
-    self.invokeCallback("attributeChangedCallback", .{ name, old_value, new_value, namespace }, frame);
-}
-
-pub fn invokeAdoptedCallback(self: *Custom, old_document: *Document, new_document: *Document, frame: *Frame) void {
-    self.invokeCallback("adoptedCallback", .{ old_document, new_document }, frame);
-}
-
-pub fn invokeAdoptedCallbackOnElement(element: *Element, old_document: *Document, new_document: *Document, frame: *Frame) void {
-    if (element.is(Custom)) |custom| {
-        custom.invokeAdoptedCallback(old_document, new_document, frame);
-        return;
-    }
-    const definition = frame.getCustomizedBuiltInDefinition(element) orelse return;
-    invokeCallbackOnElement(element, definition, "adoptedCallback", .{ old_document, new_document }, frame);
-}
-
-pub fn invokeConnectedCallbackOnElement(comptime from_parser: bool, element: *Element, frame: *Frame) !void {
+pub fn enqueueConnectedCallbackOnElement(comptime from_parser: bool, element: *Element, frame: *Frame) error{OutOfMemory}!void {
     // Autonomous custom element
     if (element.is(Custom)) |custom| {
-        // If the element is undefined, check if a definition now exists and upgrade
+        // Upgrade if a definition exists but isn't yet attached
         if (custom._definition == null) {
             const name = custom._tag_name.str();
             if (frame.window._custom_elements._definitions.get(name)) |definition| {
@@ -99,30 +65,31 @@ pub fn invokeConnectedCallbackOnElement(comptime from_parser: bool, element: *El
                 CustomElementRegistry.upgradeCustomElement(custom, definition, frame) catch {};
                 return;
             }
+            // Element is undefined and no definition exists yet — nothing to queue.
+            return;
         }
 
-        if (comptime from_parser) {
-            // From parser, we know the element is brand new
-            custom._connected_callback_invoked = true;
-            custom.invokeCallback("connectedCallback", .{}, frame);
-        } else {
-            custom.invokeConnectedCallback(frame);
-        }
+        // Dedup: skip if already queued/fired while connected.
+        if (custom._connected_callback_invoked) return;
+        custom._connected_callback_invoked = true;
+        custom._disconnected_callback_invoked = false;
+        try frame._ce_reactions.enqueueConnected(element);
         return;
     }
 
     // Customized built-in element - check if it actually has a definition first
-    const definition = frame.getCustomizedBuiltInDefinition(element) orelse return;
+    if (frame.getCustomizedBuiltInDefinition(element) == null) {
+        return;
+    }
 
     if (comptime from_parser) {
-        // From parser, we know the element is brand new, skip the tracking check
+        // From parser, we know the element is brand new; skip the dedup check.
         try frame._customized_builtin_connected_callback_invoked.put(
             frame.arena,
             element,
             {},
         );
     } else {
-        // Not from parser, check if we've already invoked while connected
         const gop = try frame._customized_builtin_connected_callback_invoked.getOrPut(
             frame.arena,
             element,
@@ -134,43 +101,95 @@ pub fn invokeConnectedCallbackOnElement(comptime from_parser: bool, element: *El
     }
 
     _ = frame._customized_builtin_disconnected_callback_invoked.remove(element);
-    invokeCallbackOnElement(element, definition, "connectedCallback", .{}, frame);
+    try frame._ce_reactions.enqueueConnected(element);
 }
 
-pub fn invokeDisconnectedCallbackOnElement(element: *Element, frame: *Frame) void {
-    // Autonomous custom element
+pub fn enqueueDisconnectedCallbackOnElement(element: *Element, frame: *Frame) void {
     if (element.is(Custom)) |custom| {
-        custom.invokeDisconnectedCallback(frame);
+        if (custom._definition == null) return;
+        if (custom._disconnected_callback_invoked) return;
+        custom._disconnected_callback_invoked = true;
+        custom._connected_callback_invoked = false;
+        frame._ce_reactions.enqueueDisconnected(element) catch |err| {
+            log.warn(.bug, "ce_reactions enqueue fail", .{ .err = err });
+        };
         return;
     }
 
-    // Customized built-in element - check if it actually has a definition first
-    const definition = frame.getCustomizedBuiltInDefinition(element) orelse return;
+    if (frame.getCustomizedBuiltInDefinition(element) == null) {
+        return;
+    }
 
-    // Check if we've already invoked disconnectedCallback while disconnected
     const gop = frame._customized_builtin_disconnected_callback_invoked.getOrPut(
         frame.arena,
         element,
     ) catch return;
     if (gop.found_existing) return;
     gop.value_ptr.* = {};
-
     _ = frame._customized_builtin_connected_callback_invoked.remove(element);
 
-    invokeCallbackOnElement(element, definition, "disconnectedCallback", .{}, frame);
+    frame._ce_reactions.enqueueDisconnected(element) catch |err| {
+        log.warn(.bug, "ce_reactions enqueue fail", .{ .err = err });
+    };
 }
 
-pub fn invokeAttributeChangedCallbackOnElement(element: *Element, name: String, old_value: ?String, new_value: ?String, namespace: ?String, frame: *Frame) void {
-    // Autonomous custom element
+pub fn enqueueAdoptedCallbackOnElement(element: *Element, old_document: *Document, new_document: *Document, frame: *Frame) void {
     if (element.is(Custom)) |custom| {
-        custom.invokeAttributeChangedCallback(name, old_value, new_value, namespace, frame);
-        return;
+        if (custom._definition == null) return;
+    } else {
+        if (frame.getCustomizedBuiltInDefinition(element) == null) return;
     }
+    frame._ce_reactions.enqueueAdopted(element, old_document, new_document) catch |err| {
+        log.warn(.bug, "ce_reactions enqueue fail", .{ .err = err });
+    };
+}
 
-    // Customized built-in element - check if attribute is observed
-    const definition = frame.getCustomizedBuiltInDefinition(element) orelse return;
-    if (!definition.isAttributeObserved(name)) return;
-    invokeCallbackOnElement(element, definition, "attributeChangedCallback", .{ name, old_value, new_value, namespace }, frame);
+pub fn enqueueAttributeChangedCallbackOnElement(element: *Element, name: String, old_value: ?String, new_value: ?String, namespace: ?String, frame: *Frame) void {
+    if (element.is(Custom)) |custom| {
+        const definition = custom._definition orelse return;
+        if (!definition.isAttributeObserved(name)) return;
+    } else {
+        const definition = frame.getCustomizedBuiltInDefinition(element) orelse return;
+        if (!definition.isAttributeObserved(name)) return;
+    }
+    frame._ce_reactions.enqueueAttributeChanged(element, name, old_value, new_value, namespace) catch |err| {
+        log.warn(.bug, "ce_reactions enqueue fail", .{ .err = err });
+    };
+}
+
+// Called by CustomElementReactions.popAndInvoke for each queued reaction.
+// Filtering already happened at enqueue time, so just fire unconditionally.
+pub fn fireReaction(reaction: Reaction, frame: *Frame) void {
+    switch (reaction) {
+        .connected => |el| {
+            if (el.is(Custom)) |custom| {
+                custom.invokeCallback("connectedCallback", .{}, frame);
+            } else if (frame.getCustomizedBuiltInDefinition(el)) |definition| {
+                invokeCallbackOnElement(el, definition, "connectedCallback", .{}, frame);
+            }
+        },
+        .disconnected => |el| {
+            if (el.is(Custom)) |custom| {
+                custom.invokeCallback("disconnectedCallback", .{}, frame);
+            } else if (frame.getCustomizedBuiltInDefinition(el)) |definition| {
+                invokeCallbackOnElement(el, definition, "disconnectedCallback", .{}, frame);
+            }
+        },
+        .adopted => |a| {
+            if (a.element.is(Custom)) |custom| {
+                custom.invokeCallback("adoptedCallback", .{ a.old_document, a.new_document }, frame);
+            } else if (frame.getCustomizedBuiltInDefinition(a.element)) |definition| {
+                invokeCallbackOnElement(a.element, definition, "adoptedCallback", .{ a.old_document, a.new_document }, frame);
+            }
+        },
+        .attribute_changed => |a| {
+            if (a.element.is(Custom)) |custom| {
+                custom.invokeCallback("attributeChangedCallback", .{ a.name, a.old_value, a.new_value, a.namespace }, frame);
+            } else if (frame.getCustomizedBuiltInDefinition(a.element)) |definition| {
+                invokeCallbackOnElement(a.element, definition, "attributeChangedCallback", .{ a.name, a.old_value, a.new_value, a.namespace }, frame);
+            }
+        },
+    }
 }
 
 fn invokeCallbackOnElement(element: *Element, definition: *CustomElementDefinition, comptime callback_name: [:0]const u8, args: anytype, frame: *Frame) void {