What actually happens when Gecko renders a web component — from bytes to pixels.

Everything the spec calls abstract state is concrete memory in Gecko. Before any callback fires, these objects exist and point at each other. Read the graph once, then the shapes — the member fields (Mozilla prefixes them m) are the whole story.

State controls two things you can observe: whether the element's callbacks fire, and whether it matches :defined. Gecko stamps the state on the instance's CustomElementData at creation and mutates it at exactly the points below.

Pick the scenario. Each row is one callback in the exact sequence Gecko fires it, with the internal trigger named. This is the answer to "what order, and why."

This is the most Gecko-specific piece and the reason lifecycle callbacks never fire in the middle of a DOM mutation you're only halfway through. Step through it.

How the boundary is generated

You don't write the push/pop — Gecko's WebIDL bindings generator does. Any operation, setter, or deleter carrying [CEReactions] gets wrapped. The RAII helper AutoCEReaction pushes a fresh element queue in its constructor and pops-and-invokes in its destructor, so the queue drains exactly when the outermost annotated call returns.

// what dom/bindings/Codegen.py emits around a [CEReactions] method body{  Maybe<AutoCEReaction> ceReaction;  if (CustomElementReactionsStack* s = GetCustomElementReactionsStack(obj))    ceReaction.emplace(s, cx);        // → s->CreateAndPushElementQueue()  self->Append(...);                  // the real DOM op; may Enqueue reactions}   // ~AutoCEReaction → s->PopAndInvokeElementQueue(): drain this queue FIFO

// dom/base/CustomElementRegistry.cpp — where reactions landvoid CustomElementReactionsStack::Enqueue(Element* el, CustomElementReaction* r) {  if (mRecursionDepth) {                     // inside a [CEReactions] boundary    // ... push queue for this depth if needed ...    mReactionsStack.LastElement()->AppendElement(el);   // element → current queue    el->GetCustomElementData()->mReactionQueue.AppendElement(r);  // reaction → element    return;  }  // no active boundary → backup queue + schedule a microtask  MOZ_ASSERT(!r->IsUpgradeReaction(), "upgrade reactions must not hit backup queue");  mBackupQueue.AppendElement(el);  // ... EnsureBackupQueueMicrotask() ...}

The shadow root is a real node hung off the host. Its shape carries the mode, the slot map, and its own scoped style state.

// dom/base/ShadowRoot.hclass ShadowRoot : public DocumentFragment {  Element*                         mHost;          // GetHost() — the shadow host  ShadowRootMode                   mMode;          // Open | Closed  SlotAssignmentMode               mSlotAssignment; // Named | Manual  bool                             mDelegatesFocus;  nsTHashMap<nsString, nsTArray<HTMLSlotElement*>> mSlotMap;  // name → slots  UniquePtr<ServoStyleRuleMap>      mStyleRuleMap;  // this tree's scoped rules};

Element::AttachShadow() stashes it in the host's extended DOM slots (ExtendedDOMSlots()->mShadowRoot). A definition with mDisableShadow makes CanAttachShadowDOM() return false — that's how disabledFeatures: ["shadow"] is enforced at the C++ level.

The two parents every slotted node has

A slotted node lives at a fork: its DOM parent stays the host (that's what .parentNode reports), but its flattened-tree parent is the slot's container in the shadow tree. Gecko exposes this split through dedicated traversals:

• nsIContent::GetFlattenedTreeParent() — the parent used for style inheritance and box generation.
• FlattenedChildIterator / AllChildrenIterator — walk children through slots (the composed view).
• ExplicitChildIterator — walks the raw DOM children (the authored view).

Slot assignment changes (ShadowRoot::AssignSlot, or HTMLSlotElement.assign() in manual mode) run the "assign slottables" algorithm and, when membership changes, "signal a slot change" — which enqueues the slot on a set flushed as a microtask to fire slotchange.

Where the boundary re-enters: scoping selectors

Style is the one stage where "which side of the shadow boundary am I on" still matters. Stylo implements the crossings: