Web Components

Web Components are a set of native browser APIs (Custom Elements, Shadow DOM, and HTML templates) that let you build reusable, encapsulated UI elements without a framework. They matter for SEO because Shadow DOM can wall off content from the light DOM, and content that lives only in a JavaScript-generated shadow root can slip past crawlers that never see it.

The short version: Googlebot flattens the shadow DOM into the rendered output, so content inside an open shadow root generally gets indexed. But content that depends on a closed shadow root, or that a component injects only via JavaScript, is fragile. The reliable move is to keep the words that matter in the light DOM.

Light DOM vs. shadow DOM, in code

This custom element uses a <slot> so its real content lives in the light DOM (crawler-safe) while the component only styles and arranges it:

class ProductCard extends HTMLElement {
  connectedCallback() {
    // 'open' shadow root: inspectable and flattened by Googlebot
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `
      <style>.wrap{padding:1rem;border:1px solid #ccc}</style>
      <div class="wrap"><slot></slot></div>`;
  }
}
customElements.define('product-card', ProductCard);

<!-- The real content sits in the light DOM, in the HTML source -->
<product-card>
  <h2>Nyons Black Olives, 500g</h2>
  <p>AOC olives from the Rhone valley. In stock.</p>
</product-card>

Because the heading and description are slotted light-DOM content, they are in the served HTML. A crawler reads them with zero dependence on your component's JavaScript. That is the pattern to reach for.

What gets indexed, and what is risky

How to check your web components on your own site

1. View source (not "Inspect"). Ctrl+U shows raw HTML. If your component's text is there as light-DOM content, you are in good shape. If the custom element is an empty tag, the content depends on JavaScript.
2. Diff raw vs. rendered. Compare curl -sL https://yoursite.com/page against the rendered HTML in Search Console URL Inspection. Content that appears only after rendering lives in the shadow DOM or is JS-injected.
3. Check shadow root mode. In DevTools, expand the custom element. "#shadow-root (open)" is inspectable and flattened; "(closed)" is a red flag for anything important.
4. Test with JavaScript disabled. Disable JS in DevTools and reload. Whatever text remains is what non-rendering crawlers and many AI bots will see.
5. Confirm links are real anchors. Make sure navigation inside components uses <a href> in the light DOM, not click handlers on custom elements, so crawlers can follow them.

Common mistakes and how to fix them

• Core content in a closed shadow root. Product descriptions or article body inside mode: 'closed' can go unindexed. Fix: move real content to the light DOM via slots, and reserve shadow DOM for presentation.
• Custom elements with no light-DOM fallback. A crawler that does not render sees an empty <my-widget></my-widget>. Fix: put meaningful default content between the tags so it exists in the HTML before JavaScript runs.
• Links as click handlers, not anchors. A component that navigates via a JS click leaves no crawlable link. Fix: use real <a href> elements so URLs get discovered.
• Headings buried in shadow DOM. If your H1/H2 structure lives inside components, the document outline can look empty to tools. Fix: keep the semantic heading hierarchy in the light DOM.
• Assuming every crawler renders like Google. Google flattens open shadow DOM; many other bots do not run JavaScript at all. Fix: for content that must be seen everywhere, keep it in the served HTML, full stop.

Frequently asked questions

Can Google index content inside the shadow DOM?

Generally yes for open shadow roots, which Googlebot flattens into the rendered DOM after executing JavaScript. Closed shadow roots and purely JS-injected content are riskier. For anything you truly need indexed, slotted light-DOM content is the dependable choice.

What is the difference between open and closed shadow DOM?

An open shadow root is accessible via element.shadowRoot and inspectable in DevTools; a closed one returns null and hides its internals from outside scripts. For SEO, prefer open, and keep important content in the light DOM regardless.

Do Web Components hurt my SEO?

Not inherently. Used well, with real content in the light DOM and real anchor links, they are fine. They hurt SEO only when they hide core content in closed shadow roots or generate everything with JavaScript and no fallback.

Should I use a slot or render content directly in the shadow root?

Use a slot for anything that is real content. Slotted content stays in the light DOM (in your HTML source) while the component handles styling and layout. Render only presentational scaffolding directly inside the shadow root.

How do AI crawlers handle Web Components?

Less generously than Google. Many AI crawlers execute little or no JavaScript, so shadow-DOM and JS-injected content can be invisible to them even when Google eventually flattens it. Keeping content in the served HTML is the safest bet for AI visibility.

Related reading: Shadow DOM SEO Considerations, WRS (Web Rendering Service), JavaScript SEO: How Search Engines and AI Crawlers Render Your Pages.