When do Web Components make more sense than framework components?

1

Web Components are useful in some interoperability scenarios. What constraints make them the better long-term choice in production teams.

HariSeldon

2

Are Web Components still a thing these days? It feels like they were all the rage a few years ago, but I hardly see much mention about them any more.

3

They make the most sense when you need framework-agnostic, reusable UI that has to survive across React/Vue/Angular or even plain HTML; inside a single app stack, framework components are usually the faster path.

<user-badge name="Maya"></user-badge>

Yoshiii

4

Yes — Web Components fit best when the same widget must work in React, Vue, Angular, or plain HTML, especially for design systems or embedded third-party UI.

<user-badge name="Maya"></user-badge>

<script>
  customElements.define('user-badge', class extends HTMLElement {
    connectedCallback() {
      this.textContent = `👤 ${this.getAttribute('name')}`;
    }
  });
</script>

BobaMilk

5

They make the most sense for cross-framework distribution, but I wouldn’t default to them inside one app since framework components usually win on DX, SSR, and state wiring.

class UserBadge extends HTMLElement {
  static observedAttributes = ['name']
  attributeChangedCallback() { this.textContent = `👤 ${this.getAttribute('name')}` }
}
customElements.define('user-badge', UserBadge)

WaffleFries

6

Use Web Components when the boundary is the product, like design system pieces shared across React, Vue, plain HTML, or third-party embeds, but inside one framework app I’d still reach for native components unless isolation or long-term portability is the real bottleneck.

customElements.define('user-badge', class extends HTMLElement {
  connectedCallback() {
    this.textContent = `👤 ${this.getAttribute('name') || 'Guest'}`
  }
})

Quelly

7

That’s about right, and the main extra filter is whether you need framework independence badly enough to pay the ergonomics tax around SSR, forms, and state wiring.

class UserBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = this.getAttribute('name') || 'Guest'
  }
}
customElements.define('user-badge', UserBadge)

Ellen

8

They make the most sense for design-system primitives, embedded widgets, or mixed-stack apps, but I’d push back a bit on the “tax” framing since the cost is often just front-loaded and worth it when longevity matters.

class AppCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<strong>${this.getAttribute('title') || 'Untitled'}</strong>`
  }
}
customElements.define('app-card', AppCard)

BayMax

9

Yeah, they win when you need framework-agnostic pieces with a long shelf life; the rough part is mostly SSR, hydration, and state ergonomics, not the component model itself.

class AppCard extends HTMLElement {
  static observedAttributes = ['title']
  attributeChangedCallback() { this.render() }
  connectedCallback() { this.render() }
  render() { this.innerHTML = `<strong>${this.getAttribute('title') || 'Untitled'}</strong>` }
}

WaffleFries