Web Components are amazing for distributing frontend libraries. But they're awful as building blocks to replace a framework like React, Vue, Svelte or Lit with.

I blame the Chrome people for the misleading naming. The entire term "Web Components" is ridiculous. If only they'd stuck with the technical term, "custom elements", then none of this confusion would've happened. It's pretty obvious to me that custom elements are a great idea for distribution (add a script tag, poof, magic new HTML element exists!), but the term doesn't imply anything about how to best build the internals of your app.

Thing is, Web Components are a needlessly painful abstraction. There's properties and attributes, they're kinda sorta the same but not really and you gotta sync them up manually, the naming is global so you get zero modularity, really it's all a mess. And at the same time, you get no support at all for things like props handling, event calling, data binding; none of the stuff frameworks give you.

But Web Components are also what enabled my company to distribute a single UI library that works with all web frameworks. It's a fantastic technology for that.

tldr:

    - distributing UI components: web components
    - building an app: just pick a framework already