How do I inspect Shadow DOM?

In DevTools: open Elements panel, find the custom element (e.g. my-button), and look for the shadow-root node beneath it. You can expand it to see the encapsulated HTML and CSS. Alternatively, in the Console use: document.querySelector('my-element').shadowRoot to access the shadow root programmatically (only works for open mode). This tool lets you paste HTML to analyze shadow DOM structure without needing DevTools access.

What is the difference between open and closed Shadow DOM?

Open shadow DOM (mode: 'open') allows external JavaScript to access the shadow root via element.shadowRoot. This enables debugging tools and external scripts to inspect the internal structure. Closed shadow DOM (mode: 'closed') returns null for element.shadowRoot from outside the component, making it inaccessible to external scripts. Closed mode is rarely used — most web components use open mode.

Why can't I inspect Shadow DOM from a URL?

Browser Same-Origin Policy prevents JavaScript from accessing the DOM of a cross-origin iframe. A client-side tool cannot load https://example.com in an iframe and read its document — the browser blocks it as a security measure. To inspect Shadow DOM of a third-party site, use browser DevTools (F12), or paste the page HTML here using F12 > Elements > right-click root > Copy > Copy outerHTML.

// Web Components Debugger

Shadow DOM Inspector
Debug Web Components & Shadow Roots

Paste HTML to analyze web components, detect shadow roots, inspect open/closed modes, slots, and encapsulated styles — instantly in your browser.

Shadow Roots Open / Closed Slots Detection Attributes Free · No install

// Paste HTML containing web components 0 chars

⚠ Why URL inspection is limited in browser tools

Browser Same-Origin Policy prevents any client-side tool from loading a third-party URL and reading its DOM. When an iframe loads 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.

Tools that claim to "inspect any URL" in the browser are either: running a server-side proxy, using a browser extension with elevated permissions, or showing fake/demo data.

// How to inspect Shadow DOM of any website

1 Open the target website in your browser
2 Open DevTools — press F12 or Cmd+Option+I
3 Go to the Elements panel and find the html root element
4 Right-click the html element → Copy → Copy outerHTML
5 Switch to the Paste HTML tab and paste
6 Alternatively use the DevTools Console: document.querySelector('my-element').shadowRoot

Shadow DOM explained

Shadow DOM is a browser API that allows web components to encapsulate their internal HTML, CSS, and JavaScript from the rest of the page. It creates a separate DOM subtree — the shadow tree — attached to a host element but isolated from the main document.

// Attaching a shadow root


class MyButton extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: ‘open’ })
shadow.innerHTML = `<style>button { background: rebeccapurple; }</style> <button><slot></slot></button>`
}
}
customElements.define(‘my-button’, MyButton)

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.

FAQ — Shadow DOM debugging

Open DevTools (F12) → Elements panel. Web components show a #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.

Three reasons: (1) The component uses 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.

Shadow DOM creates a style boundary. Page styles cannot reach inside shadow roots. Shadow styles cannot leak outside. However: CSS custom properties (--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.

Lit uses open shadow DOM by default. Stencil uses shadow DOM by default (configurable). Angular Elements supports shadow DOM via 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.

Shadow DOM InspectorDebug Web Components & Shadow Roots

Shadow DOM Inspector
Debug Web Components & Shadow Roots