```yaml
product: AlterLab
title: "Shadow DOM — Web Scraping Glossary | AlterLab"
comparison_context: "AlterLab is an alternative to Firecrawl, ScrapingBee, and Bright Data."
source_url: https://alterlab.io/glossary/shadow-dom
```

browser

# Shadow DOM

Shadow DOM is a browser API that encapsulates a component's internal HTML and CSS in an isolated subtree, separate from the main document DOM.

Shadow DOM allows web components to encapsulate their internal markup and styles so that they do not conflict with the rest of the page. The shadow root is attached to a host element; the DOM subtree inside the shadow root is accessible through JavaScript but is invisible to standard document-level `querySelector` and `getElementsBy*` calls.

For scrapers, Shadow DOM content is invisible to basic CSS selector or XPath queries on the main document. Playwright and Puppeteer provide `piercing` selectors that traverse shadow roots — Playwright's `>>` syntax and its built-in shadow-piercing modes — allowing extraction of content inside custom elements.

Modern web components (navigation menus, product carousels, checkout flows) increasingly use Shadow DOM for encapsulation. Scrapers targeting these sites must detect and traverse shadow roots to access the underlying content.

### What is Shadow DOM?

Shadow DOM is a browser API that encapsulates a component's internal HTML and CSS in an isolated subtree, separate from the main document DOM.

### How does AlterLab handle Shadow DOM?

Modern web components (navigation menus, product carousels, checkout flows) increasingly use Shadow DOM for encapsulation. Scrapers targeting these sites must detect and traverse shadow roots to access the underlying content.

## Examples

```
// Playwright: pierce Shadow DOM with >>> selector
const text = await page.locator("my-component >>> .product-price").textContent();

// Or via evaluate:
const text = await page.evaluate(() => {
  const host = document.querySelector("my-component");
  return host.shadowRoot.querySelector(".product-price").textContent;
});
```

## Related Terms

[DOM (Document Object Model)The tree-structured programmatic representation of a web page that JavaScript manipulates to create dynamic content.](https://alterlab.io/glossary/dom)[CSS SelectorA pattern used to match HTML elements by tag, class, ID, or attribute, used in web scraping to extract specific nodes from parsed HTML.](https://alterlab.io/glossary/css-selector)[JavaScript RenderingThe process of executing a page's JavaScript in a browser engine before extracting content, required for React, Vue, and Angular SPAs.](https://alterlab.io/glossary/javascript-rendering)[Headless BrowserA web browser that runs without a graphical user interface, executing JavaScript and rendering pages exactly as a real browser would.](https://alterlab.io/glossary/headless-browser)[PlaywrightAn open-source browser automation library from Microsoft that controls Chromium, Firefox, and WebKit through a unified async API.](https://alterlab.io/glossary/playwright)

## Extract Shadow DOM data from any website

AlterLab returns clean, structured data from any public URL — no scraper infrastructure needed. Start free, no credit card required.

[View API docs](https://alterlab.io/docs/api/rest)

[Back to Glossary](https://alterlab.io/glossary)