Web components

What are the building blocks?

MDN names three technologies.

1. Custom elements are JavaScript APIs for defining new elements and their behavior. A class is registered with customElements.define(), and the element name must contain a hyphen, for example <product-card>.
2. Shadow DOM attaches an encapsulated DOM tree to an element. Styles and IDs inside it do not collide with the rest of the page.
3. HTML templates and slots use <template> for markup that is not rendered until it is used, and <slot> as a placeholder for content passed in from outside.

What do web components mean for SEO?

Google renders pages with a headless Chromium and flattens light DOM and shadow DOM when it does. If a web component does not use the <slot> mechanism for light DOM content, Google’s documentation points to the component’s own documentation or to using another component. It recommends checking the rendered HTML in the Rich Results Test or the URL Inspection tool to confirm that all expected content is there.

Without JavaScript a custom element is an empty container. A crawler that does not execute scripts then sees only what stands between the tags in the original HTML. Text that should rank is therefore safest as plain markup (assessment, not a Google rule).

Example

<product-card>
  <h2 slot="title">Trail running shoe X</h2>
  <p slot="price">$89.00</p>
</product-card>

The text sits in the light DOM of the page and is placed into the card through slots. It stays in the HTML even before the element is defined.

FAQ

Is shadow DOM content indexed? Google flattens shadow DOM and light DOM during rendering. Content has to appear in the rendered HTML.

Do I need a framework for web components? No. They are browser standards, although some frameworks can generate or consume them.

Last updated: October 8, 2026