Understanding Shadow DOM in Chrome DevTools: Why Some Elements Aren’t Captured by “Copy OuterHTML”

If you’ve been exploring Chrome’s Developer Tools to identify icons or specific elements, you might have encountered a perplexing issue: certain code blocks appear within #shadow-root (open) sections, and copying the outer HTML doesn’t capture these nested elements. Let’s delve into what this means and why it happens.

Discovering Hidden Elements in DevTools

Recently, while searching for a specific icon within Chrome’s DevTools, I stumbled upon the technique of inspecting DevTools itself—often referred to as “DevTools on DevTools.” This approach allows developers to examine the structure of Chrome’s internal components to find icons, styles, or other elements not immediately visible.

Initially, I identified my target element in the Elements Panel, an inline <span> with a style like --icon-url: .... Using the right-click menu, I selected Copy > OuterHTML. However, I noticed that the copied code only included the <devtools-button> element, omitting the nested <span> I was interested in. This was puzzling—shouldn’t copying outerHTML include everything within the element?

Encountering the Shadow DOM

The breakthrough came when I used the Element Selector to examine other buttons in the toolbar. I observed that part of the element tree was enclosed within a #shadow-root (open) block. This shadow root encapsulates its internal DOM, making it inaccessible via normal DOM traversal methods or simple copy operations.

Here’s what I typically see:

“`html

shadow-root (open)

…
“`

Any nested elements within this shadow root are effectively isolated from the main document DOM. As a result, using Copy OuterHTML from the parent element doesn’t include the contents of the shadow root—they’re deliberately hidden from standard DOM queries to preserve encapsulation.

What Is #shadow-root (open)?

The Shadow DOM (#shadow-root) is a web standard that provides component encapsulation. When the browser renders shadow roots with open mode, developers can access the shadow DOM via JavaScript, but from the perspective of tools like DevTools, this section is visually separated and not part of the main DOM tree.

Why Don’t Copies Capture Shadow DOM Contents?

Since the shadow root is a separate, encapsulated DOM subtree, native methods like Copy > OuterHTML