Web Components were on my rader as a native built-in feature that I was interested in using. However, after using it, I have some thoughts on the technology.

y tho

Well, let’s start with my…

Experience

Honestly, the experience with Web Components (Atleast for me) wasn’t that bad. I was using it to add small interactivity in my site’s guestbook. (Check it out at /guestbook) However, I was not using it the way most people would think.

Here is what I did:

<guestbook-comments class="mt-10 gap-4 flex flex-col">
  <!-- child slot replaced with data fetched -->
  <slot />
</guestbook-comments>

<script>
  import type { GuestBookEntry } from "../utils/guestbook";

  class GuestbookComments extends HTMLElement {
    public async addEntry(newEntry: GuestBookEntry) {
      // ...
    }
  }
</script>

You can find the full source file on GitHub.

Web Components are meant to be like framework components (Like in React for example), where a component itself does everything in a shadow-root. However, a problem arises this way. Web Components don’t support SSR, and they also lead to worse SEO. Because they need to be defined with customElements.define() which is only available in the browser window object. This means using shadow root as a namespace for creating elements will not render the elements if JavaScript is disabled. They are client-only, and this is a deal breaker for me. These are meant to be small interactive bits, essentially an addEventListener() call, not a fully “SPA-Like” component.

What I was doing with Web Components could be just used as regular onsubmit && onclick handlers. The only advantage I got using Web Components for event listeners, was writing code where you have custom methods defined on an element.

<script>
  class AddComment extends HTMLElement {
    public async addComment() {
      // Types are funny.
      const guestbookComments: (Element & { addData(newEntry: GuestBookEntry): Promise<void> }) | null = document.querySelector("guestbook-comments");

      // Its the same method that I had defined before in the Web Component.
      if (guestbookComments) await guestbookComments.addEntry(stuff);
      //                                             ^^^^^^^
    }
  }
</script>

Are Web Components Good Though, In My Opinion?

Well, Eh… No

I just think they can be way better. The main issue I have with them is their API and SSR/SEO limitations. I don’t get the trend of making native web features ridiculously difficult to work with. Web Components don’t need to have a API that makes it difficult to work with them. What I’ve noticed is, whenever a new feature comes out on the Web Platform, it’s either too low-level, like Web Components, or too limited, of which there are many examples of. This is a weird trend that I can’t see the rationale behind. When it comes to Web Components, I’ll say for small interactivity websites, they can work. However for larger website, Web Components are best to not even be thought of.

Conclusion

Although everyone likes to trash on Web Components, I think they are pretty alright, but only in rare scenarios. They are a convenient feature for adding interactivity with vanilla JavaScript and their utility is strengthened even further in frameworks like Astro, with the Islands architecture. However, I think they are not the best solution for larger websites. They are a good feature, but not a great one. I hope that in the future, Web Components will be improved to be more developer-friendly and better suited for SSR/SEO. For right now, the cons outweigh the pros by a large margin.