Shadow DOM is a web standard for creating a hidden, encapsulated version of the DOM, which is attached to a normal DOM (“light” DOM) element but kept separate from the rest of the page. Since the "shadow" part of the DOM is separate from the main page content, its style and markup won’t interfere with the rest of the page.
The shadow DOM is under #shadow-root. It is primarily used in web components such as custom form elements, interactive buttons, or complex widgets.
Shadow DOM and SEO
Dynamic, JavaScript-heavy pages might have trouble getting properly indexed if they rely too heavily on web components and shadow DOM. When it comes to SEO, take caution about what content goes inside a Shadow DOM, because search engines may not index or crawl content inside the shadow DOM. This can be problematic if you’re using shadow DOM for critical content like text, images, or links, because it could prevent these elements from being visible to search engines.
Google supports web components. When Google renders a page, it flattens the shadow DOM and light DOM content. This means Google can only see content that's visible in the rendered HTML. To make sure that Google can still see your content after it's rendered, use the Rich Results Test or the URL Inspection Tool and look at the rendered HTML. If the content isn't visible in the rendered HTML, Google won't be able to index it.
If you place important internal (or external) links inside the shadow DOM, those may not fully pass on link equity, harming your website’s internal linking structure and overall SEO. Another example is if you have a blog post embedded in a custom component with a Shadow DOM, search engines might not be able to read that post and therefore won't index it. Similarly, if you use a custom form with fields in the shadow DOM, it might not be crawlable.
From an SEO perspective, it’s important that all key content such as titles, headings, text, and links, are visible in the main DOM to ensure that it’s crawled and indexed. While Google and other search engines have improved at handling Shadow DOM over time, there’s still a risk that important content could be overlooked, especially if it's hidden deep within components that aren't rendered properly.
Shadow DOM Can Be SEO-Friendly
Here are some tips to ensure that shadow DOM doesn't hurt your SEO.
As a best practice, avoid placing key content such as primary navigation, blog posts, or important links exclusively in the shadow DOM. Vital SEO elements should be part of the light DOM. Keep Shadow DOM for things like custom widgets or interactive components that aren’t central to your page’s content or SEO.
Use the <slot> element to make sure that both light and shadow DOM content are displayed in the rendered HTML.
Use progressive enhancement and ensure that critical content remains accessible without relying on JavaScript, by making sure that critical content is still available in the light DOM. That way, even if Googlebot has trouble with the Shadow DOM, it can still access your essential information.
Finally, before launching, use Google Search Console to see how Googlebot views your page. This will give you insight into whether your Shadow DOM elements are being crawled properly.
Shadow DOM is a powerful tool for building reusable, encapsulated components that improve the flexibility and maintainability of code. By understanding the nuances of shadow DOM and taking steps to optimize your web content for search engines, you can ensure that your site’s SEO remains strong while still leveraging the power of web components.
