←back to thread

The Failed Promise of Web Components

(lea.verou.me)
367 points lemonberry | 2 comments | 30 Sep 20 15:59 UTC | HN request time: 0.427s | source
Show context
verisimilidude ◴[30 Sep 20 18:17 UTC] No.24641789[source]▶
Fully agree with the author.

My biggest complaint about web components is that I don’t see a lot of advantages over using React, Svelte, or some other JS library. The author hints at this: if I’m already committing to a big JS build process, why wouldn’t I reach for one of these more ergonomic JS tools? Warm fuzzies for trying to use open standards isn’t enough to convince most people to switch away from more popular JS solutions.

replies(4): >>24641859 #>>24641900 #>>24642049 #>>24644957 #
1. isochronous ◴[30 Sep 20 22:49 UTC] No.24644957[source]▶
Because then you don't have to pass a huge framework library down the wire along with all of your custom code? Look at it the other way, if you don't get a big advantage over web components by using React, Svelte, etc then why would you use them? Web components are natively supported by modern browsers. Using a fairly simple base class like Lit-Element to provide some template niceties and lifecycle hooks gives us all the extras we need. We've figured out a really nice top-down functional state pattern for data that eliminates the need for two-way binding and requires very little "framework" level code - it's probably like 100 lines if you take out whitespace and comments.
replies(1): >>24647114 #
2. hunterloftis ◴[01 Oct 20 03:41 UTC] No.24647114[source]▶
> Using a fairly simple base class like Lit-Element to provide some template niceties and lifecycle hooks gives us all the extras we need. We've figured out a really nice top-down functional state pattern for data that eliminates the need for two-way binding and requires very little "framework" level code - it's probably like 100 lines if you take out whitespace and comments.

I'm also a fan of LE, which I'm using to build my current side-project.

However, the data doesn't back up this claim. A component built with LitElement gets about 19 KB added to it when bundled:

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-co...