Shadow DOM

DevBridge fully supports both open and closed Shadow DOM, including nested shadow trees.

Open Shadow DOM

Open shadow roots are traversed automatically. Elements inside open shadow trees appear in the accessibility tree with a [shadow-open] marker and use the reference format ref_N.

Closed Shadow DOM

Closed shadow roots (where shadowRoot is null from JavaScript) are accessed via the Chrome DevTools Protocol backend. Elements are marked [shadow-closed] and use the reference format:

s{hostBackendId}::ref_N

DevBridge uses CDP's pierceClosedShadow, getBoxModelForBackend, and callFunctionOnBackend internally to interact with closed shadow elements without requiring any page-level access.

Supported tools

All read and interaction tools support Shadow DOM:

• read_page — includes open and closed shadow content inline
• find — searches inside shadow trees
• computer (click, hover, type) — interacts with shadow elements
• form_input — fills inputs inside shadow DOM (React-compatible)