←back to thread

367 points lemonberry | 1 comments | | HN request time: 0.209s | source
Show context
verisimilidude ◴[] 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 #
onion2k ◴[] No.24641900[source]
One huge advantage is that you can isolate a web component in its own shadow DOM, which means it has CSS that's independent from the rest of the page. If you're making something for other people to embed in their code, even if you're on the same project, you can save them from breaking it by styling it by mistake.

You can also close the shadow DOM to stop people easily inspecting it, but I must admit I haven't actually figured out a reason to do that yet.

replies(2): >>24642044 #>>24643212 #
franciscop ◴[] No.24642044[source]
That is the same if you use e.g. styled components with React, where every component is self-contained and doesn't leak the styles. The mechanism is different, but the end result is the same, and oh it's a game changer IMHO.
replies(3): >>24642885 #>>24644998 #>>24650604 #
1. sime2009 ◴[] No.24644998[source]
The difference is that web components provide browser supports low level APIs which frameworks can use to make isolated components.

Sure, you can get the same effect in React. But that only works if everyone on your page is playing by the same rules and using React.

I can drop a web component into some legacy page which is full of old school jQuery and global CSS styles and my component will be isolated and work. Try the same trick with React in that situation and it will likely conflict terribly and get stomped by the old legacy code.