What Are Web Components? When Should You Use Them?

In modern frontend development, we often reuse the same UI elements across different parts of an application — buttons, modals, dropdowns, tabs, etc. Maintaining these consistently across different projects or frameworks can become a challenge.

That’s where Web Components come in.

What Are Web Components?

Web Components are a set of web platform APIs that allow you to create custom, reusable HTML elements — encapsulated and independent of the rest of your code.

They consist of 3 main technologies:

Custom Elements – Define your own HTML tags (e.g. <my-button>).
Shadow DOM – Encapsulate styles and markup so they don’t leak in or out.
HTML Templates – Define reusable chunks of HTML.

Example

<my-button></my-button>

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>
          button { background: teal; color: white; padding: 8px 16px; border: none; }
        </style>
        <button><slot></slot></button>
      `;
    }
  }

  customElements.define('my-button', MyButton);
</script>

When Should You Use Web Components?

Use Web Components when you need:

Reusable UI elements across multiple pages or projects
Cross-framework compatibility (e.g. React + Vue + plain HTML)
Encapsulated styling and logic (to avoid CSS conflicts)
A portable UI library to share with other teams

Good Use Cases

Design system components (buttons, inputs, cards)
Custom widgets (date picker, tooltip, rating stars)
Embeddable apps (chat widgets, dashboards, maps)

When Not to Use Web Components

Don’t use Web Components for things like:

Utility functions (e.g. formatting dates, math)
Algorithms or API logic (use .js or CDN modules instead)
When you’re building entirely within a single framework (like React or Vue) — their component systems are often easier to work with in that context

TL;DR

Use It For	Avoid Using It For
Reusable UI elements	Pure logic or algorithms
Cross-framework UI	Framework-specific apps
Encapsulated widgets	Utility JS libraries only

Bonus: Web Component + JS Lib = 💡

You can also wrap existing JS libraries (like Chart.js or Mermaid) inside a Web Component to make them easier to use:

<mermaid-diagram code="graph TD; A-->B;"></mermaid-diagram>

Inside, your component can handle the JS initialization logic. This gives you the best of both worlds: simple HTML API + powerful JS features.

Final Thoughts

Web Components are a powerful tool, especially when your project needs reusable UI that works anywhere — not just in one specific framework. While they’re not a replacement for libraries like React or Vue, they are a great companion when used in the right place.

Use them wisely — and your future self (and teammates) will thank you.

Written by a dev who has broken too many modals and styles over the years.