Paste HTML to view the full DOM tree, analyze web components, detect shadow roots, inspect open/closed modes, slots, and encapsulated styles — instantly in your browser.
https://example.com, JavaScript cannot access iframe.contentDocument — the browser blocks it as a security measure. This is true for every browser-based inspector, not just this one.
F12 or Cmd+Option+Ihtml root elementhtml element → Copy → Copy outerHTMLdocument.querySelector('my-element').shadowRootA DOM inspector lets you view the full structure of a document — every element, its attributes, and its children — the same tree you'd see in browser DevTools. Shadow DOM adds a layer to that tree: it's a browser API that lets web components encapsulate their internal HTML, CSS, and JavaScript from the rest of the page in a separate, isolated shadow tree attached to a host element.
Full DOM tree vs. Shadow DOM view
A regular DOM inspector walks every element in document the same way, but it skips the contents of a shadow root by default — shadow trees are intentionally hidden from normal traversal. This tool renders the full DOM tree first, then flags any element that has a custom element tag (e.g. my-button) or an attached shadow root, so you can expand into the encapsulated content from the same view.
Open vs Closed Shadow DOM
mode: 'open' means element.shadowRoot returns the shadow root from outside — DevTools and external scripts can access it. mode: 'closed' returns null from outside, making the internal structure inaccessible to JavaScript outside the component. Closed mode is rarely used in practice — the vast majority of web components use open mode, including Lit, Stencil, and most design systems.
What does Shadow DOM encapsulate?
CSS inside a shadow root does not leak out — button { color: red } inside a shadow root only affects buttons inside that shadow root. Likewise, page CSS does not reach into shadow DOM by default. The exception is CSS custom properties (variables) — they cross shadow boundaries by design. ::slotted() and :host selectors allow limited styling from within the shadow root itself.
Slots in Shadow DOM
<slot> is a placeholder inside a shadow root where the host element's light DOM children are projected. <slot name="icon"> creates a named slot. Slots allow component consumers to inject custom content while keeping the component's own structure encapsulated. This inspector detects whether a shadow root contains slots.
#shadow-root (open) node beneath the host element. Click to expand it and see the internal HTML and styles. In Settings → Preferences, enable "Show user agent shadow DOM" to also see browser-native shadow roots (e.g. inside input[type=range]). In the Console: document.querySelector('my-el').shadowRoot returns the shadow root for open-mode components.mode: 'closed' — the shadow root exists but is intentionally hidden from external JavaScript. (2) The element has no shadow root — it's a regular HTML element or a custom element that hasn't called attachShadow(). (3) The element hasn't been upgraded yet — the custom element definition hasn't been registered. Check customElements.get('tag-name') to see if it's defined.--var) cross shadow boundaries. ::part() allows limited external styling of explicitly exposed parts. :host inside shadow CSS styles the host element. ::slotted() styles slotted light DOM children from within the shadow. The new @layer and adoptedStyleSheets APIs give more control.encapsulation: ViewEncapsulation.ShadowDom. Vue custom elements support shadow DOM via shadowRoot: true. Polymer uses shadow DOM. Vanilla custom elements with attachShadow() can use either mode. React does not natively use Shadow DOM but React components can be wrapped in web components that do.