Shadow DOM and SEO — web components and what crawlers see

Introduction

1. 1

   Use open shadow roots (attachShadow({ mode: "open" }))

   Open shadow roots are traversable from the document context. Googlebot and pre-rendering pipelines can walk them and extract content. Closed shadow roots (mode: "closed") are opaque and risk silent indexing failures.

2. 2

   Project content through <slot> with accessible defaults

   Content passed via <slot> is visible to crawlers. Provide sensible fallback content inside the slot so the component still has indexable text even if the parent forgets to project.

3. 3

   Include critical SEO content outside the shadow root when possible

   H1 headings, primary body copy, and key structured data should live in the light DOM (regular children) rather than inside a shadow root. This maximizes crawler coverage across engines.

4. 4

   Pre-render the composed tree to flatten shadow boundaries

   Pre-rendering captures the rendered HTML after shadow composition. The captured snapshot is regular flat HTML — no shadow boundaries — which removes all indexing uncertainty in a single step.

   components/product-card.ts

   typescriptCopy

   1import { html, LitElement } from "lit";
   2import { customElement } from "lit/decorators.js";
   3
   4@customElement("product-card")
   5export class ProductCard extends LitElement {
   6  static shadowRootOptions = { mode: "open" as const };
   7
   8  render() {
   9    return html`
   10      <article>
   11        <h2><slot name="title">Untitled product</slot></h2>
   12        <slot name="body">No description available</slot>
   13      </article>
   14    `;
   15  }
   16}

• Guide — hydration failures

  Component hydration is where shadow DOM issues surface.

• Guide — headless browser overhead

  Render pool requirements for component-heavy sites.

• Guide — JavaScript rendering cost

  Cost at component-heavy sites.

• Use case — SaaS

  Design systems that span frameworks.

• Compare — vs Prerender.io

  How each service handles web components.

• Technology — how pre-rendering works

  Pipeline primer.