Shadow DOM Explorer

WHAT IT DOES

Shadow DOM Explorer recursively scans the current page's DOM, detects and lists all Shadow DOM roots and their associated elements, displays the shadow tree structure with host elements and nested shadow boundaries, and allows you to click on any node to copy its selector or inspect its details. This tool is essential for developers working with web components, custom elements, and modern front-end frameworks that use Shadow DOM for encapsulation.

WHERE IT RUNS

This tool works on any webpage, including complex single-page applications (SPAs), sites using web components (Polymer, Lit, Stencil, etc.), and pages with nested shadow trees. It runs on all websites as designated in its match patterns, making it invaluable for debugging and understanding modern web architectures.

HOW TO USE

After installing the BotGentz extension, open the Shadow DOM Explorer panel from your browser toolbar or use the keyboard shortcut. Click "Scan Page" to recursively traverse the DOM and discover all Shadow DOM roots. The tool displays a tree view showing host elements with their shadow boundaries, nested shadow DOM structures, and the elements inside each shadow root. Each entry shows the element tag, ID, class, and a visual indicator when a Shadow DOM is attached. Click any element in the list to copy its CSS selector to your clipboard—the corresponding element on the page is temporarily highlighted for visual confirmation. Use the settings panel to configure maximum recursion depth, toggle host element details, include or exclude closed shadow roots, and enable auto-expansion on scan.

TECHNICAL SECTION — RECURSIVE SHADOW DOM DETECTION

Unlike browser devtools that require manual navigation through shadow boundaries, this tool uses a recursive traversal engine that automatically detects Shadow DOM roots at any depth. It uses NodeIterator to efficiently walk the DOM tree, checking each element for a shadowRoot property. The engine respects configurable recursion limits to prevent infinite loops and performance issues on deeply nested structures. It detects both open and closed shadow roots (when supported by the browser), tracks the path of each node for context, and builds a comprehensive map of the shadow tree hierarchy. The tool maintains references to actual DOM elements, enabling live inspection and selector generation from the discovered structure.

THE PANEL

The panel is draggable anywhere on the screen and remembers its position per site. It can snap to the left, right, top, or bottom edges, or float freely. Collapse it to a small status indicator when you need more page visibility, and expand it again with a single click. Resize it vertically or horizontally to see more of the shadow tree. Press Escape to close the panel instantly. All settings (max depth, host details, closed roots inclusion, auto-expand) are saved globally and persist across sessions.

PLEASE NOTE

This tool requires the free BotGentz extension. It only reads DOM structure and does not modify page content or collect any data. Closed shadow roots may not be accessible in all browsers or configurations. Deep or complex shadow trees may take longer to scan; adjust the max depth setting to balance performance and visibility. Websites change their layouts frequently; scripts may need updates, and we work to keep them current but cannot guarantee uninterrupted operation.