Shadow DOM Inspector Lite

WHAT IT DOES

Shadow DOM Inspector Lite helps you understand how web components and Shadow DOM are used on any webpage. The script detects all shadow roots on the page and displays them in a hierarchical tree view showing shadow host elements, open and closed shadow roots, and nested Shadow DOM structures. Each host element shows its tag name, ID, classes, attributes, and shadow root type (open or closed). Click a host element to expand and view its shadow content—child elements, attributes, styles, and text. A floating badge shows the total number of shadow roots on the page. When you click or hover over a host in the tree, the corresponding element is highlighted on the page. Shadow DOM nesting depth is displayed, making it easy to understand complex component structures.

WHERE IT RUNS

This script runs on every website (matching all URLs), detecting Shadow DOM elements across the entire web. It works on pages using web components, custom elements, and any Shadow DOM implementation—framework-based components (React, Vue, Angular, Lit) or vanilla web components.

HOW TO USE

After installing through the BotGentz extension, the script automatically scans for Shadow DOM elements. A floating badge shows the count. Use the configuration panel to customize your experience: toggle the floating badge on or off, show or hide host details, enable or disable auto-detection, enable or disable expand-on-click, enable or disable host highlighting, and show or hide attributes. The panel displays real-time statistics including total shadow roots, open/closed counts, and max nesting depth. Click any host in the tree to expand its shadow content and highlight the element on the page. Use the "Scan for Shadow DOM" button to manually rescan, or "Clear Highlights" to remove all highlights.

SHADOW ROOT DETECTION WITH HIERARCHY BUILDING AND NESTING ANALYSIS

This script implements a Shadow DOM detection engine using DOM traversal with shadowRoot property inspection. The engine scans all DOM elements, checking for the presence of a shadowRoot property. Each shadow root is categorized as open (mode === 'open') or closed, and nesting depth is calculated by traversing parent elements and counting shadow roots. The tree rendering engine builds a collapsible hierarchy with toggle controls, displaying host element information (tag, ID, classes, attributes) and shadow content using TreeWalker traversal for efficient DOM exploration. The host highlighting system uses CSS outline effects with smooth scroll-to-view behavior. The floating badge uses fixed positioning with click-to-toggle panel functionality.

THE PANEL

The configuration panel is fully draggable and remembers its position per-site using GM_setValue. It snaps to screen edges when dragged near them, collapses to a compact bubble when minimized, and supports Escape key for quick collapse. All settings—including badge visibility, host details, auto-detection, expand-on-click, host highlighting, and attribute display—are persisted across sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The script runs on all websites and reads the DOM to detect Shadow DOM elements. It does not capture, store, or transmit any personal information. All analysis occurs locally in your browser. Closed shadow roots cannot be fully inspected (the browser restricts access), but their presence and host element are still detected. The script only detects shadow roots that exist at the time of scanning—dynamically added shadow roots may be detected on subsequent scans. This tool is provided for development and educational purposes only.