Web Component

ELI5 — The Vibe Check

Web components are custom HTML elements that you build yourself — like creating your own LEGO brick. Instead of using a framework's component system, you use browser-native APIs to define reusable elements like or . They work in any framework or no framework at all, because they're built into the browser itself. Framework trends come and go, but web standards are forever.

Real Talk

Web Components are a set of browser-native APIs (Custom Elements, Shadow DOM, HTML Templates, and ES Modules) that enable the creation of reusable, encapsulated HTML elements. They provide framework-agnostic component architecture with style isolation through Shadow DOM. While adoption has been slower than framework-based components, they excel in design systems that need to work across multiple frameworks.

Show Me The Code

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button id="btn">Count: 0</button>
    `;
    this.shadowRoot.getElementById('btn')
      .addEventListener('click', () => {
        this.shadowRoot.getElementById('btn')
          .textContent = `Count: ${++this.count}`;
      });
  }
}
customElements.define('my-counter', MyCounter);

When You'll Hear This

"Use web components for the design system — it needs to work in React AND Vue." / "Shadow DOM keeps your component styles from leaking out."