←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.793s | source
Show context
pfraze ◴[30 Sep 20 17:35 UTC] No.24641307[source]▶
I completely agree with the author that WCs fail to push more behaviors into HTML. As she describes, you really want to be able to import the WC's script and then have new useful HTML tags.

I use LitElement pretty extensively, which is a wrapper around WCs, and I like it quite a bit - but it's only a minor improvement in my mind compared to React, and that improvement is just reducing the abstractions from the DOM API. It's still a mega codebase.

I've also tried multiple times to just work with vanilla WCs, and it's sensible only up to a very limited point. If you got a JSX/lit-html module involved it would go further, but at that point it's pretty past "vanilla." And even then, you're not in the realm of "just using HTML."

Author lays a lot of that on the developers having a proclivity for JS, and that may be true, but I've been trying to figure out if this is just complexity in the stack that hasn't yet be solved. UIs are complex, you have lots of stateful interactions between them, and I'm really not sure what the right solution would be for a "do lots via HTML" goal.

replies(3): >>24641667 #>>24641689 #>>24641730 #
1. spankalee ◴[30 Sep 20 18:12 UTC] No.24641730[source]▶
The important thing about web components is that we _can_ import the component's script and then have new useful HTML tags.

You can drop this on a page and it _just works_:

    <script type="module" src="https://unpkg.com/chessboard-element?module"></script>
    <chess-board></chess-board>
And this is built with LitElement.

Live demo: https://jsbin.com/kicelemara/2/edit?html,output

Having dependencies doesn't change the external interface to an element, or prevent it from being drop-in. Dependencies are very often good, because they are well tested implementations of a common need, rather than ad hoc implementations that may be brittle or duplicative.

replies(1): >>24644483 #
2. isochronous ◴[30 Sep 20 21:56 UTC] No.24644483[source]▶
Yes, thank you. I don't know why "they have dependencies" is a valid criticism. Literally any complex thing where the developer didn't write 100% of the code has dependencies. Most of the dependencies for the web components we use at work are... other web components, which is EXACTLY THE POINT of web components: reusability, portability, encapsulation.

I'll agree with a few of her points, but as far as this point goes, I have to wonder what components she's trying to use here. And if she wants to see the full markup of the shop demo, all she has to do is use "inspect element" on it rather than "view source."