Shadow DOM

Shadow DOM is the browser feature that gives an element an encapsulated subtree with scoped styles, hidden from normal document traversal; it is the foundation of web components. For session recording, encapsulation is the problem: content inside shadow roots does not appear to naive DOM walking or top-level mutation observation.

How it works

A shadow root attaches to a host element in open mode (reachable via element.shadowRoot) or closed mode (not reachable). A recorder must find shadow roots during serialization, descend into them, and attach mutation observation inside each root, including roots created after recording started. rrweb handles open shadow roots this way, patching attachShadow to catch new ones as they appear; closed roots are unrecordable by design unless the application cooperates by exposing them. The serialization documentation provides the broader capture model. Replay then has to rebuild the same shadow structure, since scoped styles render wrongly if the subtree is flattened into the main document.

Where you encounter it

Any app using web components or design systems built on them; symptoms of a recording gap are blank regions in replay exactly where a component library renders.