DEV Community

megazear7
megazear7

Posted on

Web Component as Good as Direct HTML for SEO?

I have been thinking about web components, light dom vs shadow dom, server side rendering, and SEO. The question that comes to mind is whether or not using web components as a way to encapsulate design and functionality with no asynchronous requests actually has worse SEO than having that data directly in the light dom. I.e Is either of these better or worse for SEO:

<my-component title="Example"
              description="Some more content"
              button-text="Do something">
</my-component>
Enter fullscreen mode Exit fullscreen mode

or

<div class="my-component">
  <h4>Example</div>
  <p>Some more content</p>
  <button>Do something</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Assuming that the web component implementing <my-component> synchronously creates the same html as the second example, just inside of the shadow DOM?

Do we have any real evidence for the first option being not as good for SEO as the second option?

Or has the idea been to play conservative since we can't be sure that whatever service is crawling our page will actually run JavaScript, and therefor the useful content of the page would be hidden inside of attributes instead of in semantic HTML elements?

Top comments (0)