# When do Web Components make more sense than framework components?

**URL:** <https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652>\
**Category:** Uncategorized\
**Created:** [March 29, 2026, 2:00am UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652 "2026-03-29T02:00:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [March 29, 2026, 2:00am UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/1 "2026-03-29T02:00:06Z")

</div>

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

HariSeldon

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 29, 2026, 4:07am UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/2 "2026-03-29T04:07:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [March 29, 2026, 7:14pm UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/3 "2026-03-29T19:14:06Z")

</div>

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.

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

```

Yoshiii

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [March 29, 2026, 9:49pm UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/4 "2026-03-29T21:49:08Z")

</div>

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.

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

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

```

BobaMilk

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [March 29, 2026, 10:49pm UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/5 "2026-03-29T22:49:06Z")

</div>

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.

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

```

WaffleFries

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [March 30, 2026, 1:21am UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/6 "2026-03-30T01:21:08Z")

</div>

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.

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

```

Quelly

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [March 30, 2026, 2:00am UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/7 "2026-03-30T02:00:08Z")

</div>

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.

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

```

Ellen

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [March 30, 2026, 3:49am UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/8 "2026-03-30T03:49:07Z")

</div>

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.

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

```

BayMax

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [March 30, 2026, 5:56am UTC](https://forum.kirupa.com/t/when-do-web-components-make-more-sense-than-framework-components/679652/9 "2026-03-30T05:56:08Z")

</div>

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.

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

```

WaffleFries