Hacker News Reader

Comment by selectnull | Hacker News Reader

I really don't understand the hate for Web Components (this article is certainly not the first one to hate on it). To me, WebComponents are great (as far as anything related to the web can be).

Let's say you need a custom favorite/like button in your app? Cool, define `<myapp-like>` tag with `customElements.define('myapp-like', MyAppLike)` and `class MyAppLike extends HTMLElement {}` gives you a way to really make it work for you.

It works in any modern browser (I've been using it natively for 2 years now). It works in React, Vue, Solid, whatever... because it doesn't care for your frontend or backend stack the same way that you use `<div>` anywhere.

In my case, I'm using web components natively and with Lit framework. Very happy with the choice.

And yes, web components are not the solution for everything. Semantic tags? Nope, it doesn't work that way.

View on HN

> I really don't understand the hate for Web Components

The article mentions a number of arguments against them (although I wouldn't describe it as "hate", even aside from how reductive that is). Any reason those arguments don't help you understand, i.e. do you think any of them are wrong, or do you just attach less weight to them?

Also a fan of web components w/ Lit.

Folks may not know that Adobe just shipped Photoshop in the browser using web components and Lit. Honestly, I don't think there's any other way that product could have been built.

Web components don't make you do anything. They allow things that are otherwise messy, especially when used with an "anti-framework" like Lit that doesn't provide any components of its own, just event hooks and bindings.

> Honestly, I don't think there's any other way that product could have been built.

Figma is built with WebGL for its canvas, and with React for its UI components. There's nothing special about Web Components in this setting.

> They allow things that are otherwise messy

Like what?

> especially when used with an "anti-framework" like Lit

Lit isn't anti-framework. Lit has an anti-framework stance while having all the attributes and makings of a framework.

> I really don't understand the hate for Web Components (this article is certainly not the first one to hate on it).

- They completely ignore any and all developments in the user space

- They are bad for any of their stated purposes (of which there have been several)

- They require complex specs that make the platform more and more brittle, and impossible to reason about or implement. Most of those specs exists only because web components are so poorly designed they introduce problems no other tech in the space has.

- After over a decade in development they still need 20 more complex web specs to fix issues that, again, no one else has: https://w3c.github.io/webcomponents-cg/2022.html And yes, this list only appeared in 2022 because it took the people who push them 10 years to finally come together and discuss what is needed to mark them as more-or-less complete

They will claim that "web coponents is 'use the platform'" even though it's trivial to show that web components are the worst citizens on said platform. I can't think of any tech that has been as ill-suited to the platform as web components [1]

- The previous bullet point exists because the entire development has been purely ad-hoc haphazard "we'll fix issues later" by people who continuously make a suprised pikachu face when stuff doesn't work even in the most simplest of scenarios that others have pointed out from miles away.

- Don't forget the complete arrogance of most people driving all this. They will deflect and ignore all questions and criticism, they will blame you, users, React, God, or anyone for not understanding their grand vision (that they themselves cannot explain) and for not using this. They will stoop as low as borderline gaslight even the people who work with them on developing this (reading through discussions on Constructible Stylesheets made me lose faith in humanity)

---

[1] https://threadreaderapp.com/thread/1717580502280867847.html

It seems you and the OP are discussing different platform levels. They use a framework like Lit and it abstracts away the complexity, leaving very simple deployment for end users.

By comparison your complains seem like those faced by the kind of people making the Lit framework. IMO neither viewpoint is invalid.

Well, the question was "I really don't understand the hate for Web Components".

Once you've reached for a framework that papers over all the issues, and offers you a nice interface, it's no different if you reach for React, Preact, Vue, Svelte, or lit :)

I might be wrong, but the way I see it is that Web Components give the basic blocks of writing those frameworks easier. Of course, most of those frameworks are older than WCs and they made their own choices about how to implement components and probably (I don't really know) don't use WC (or use only parts of it).

But, if someone wanted to make a new framework, today, I see no reason why they wouldn't use WCs. And let's not have an argument about JSX being a nicer developer experience, because sure it is nicer to use JSX and have autocompletion and all, but JSX does not run natively in the browser. WCs do. There are compromises.

What kind of functionality is "runs natively in the browser"?

JSX also runs in every browser.

Edit: Just rename "Web Components" into "Web Tags" and it's all good.

I don't know what browser you use, but when I do:

    const el = <p>Hello, world!</p>;

I get `Uncaught SyntaxError: Unexpected token '<'`. I even tried in several browsers, no luck.

It seems the problem here is not the browser, but your lack of knowledge.

You're just missing two things. First, install Lit. Then write it as:

const el = html`<p>Hello, world!</p>`

And you're done. These are called "tagged template literals[0]". Lit gives you the html "tag" for the literal that you're looking for.

[0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

Both are non-standard DSLs that need an external library to work

1) that’s not JSX, it just looks like it

2) it’s still an external library, which is OPs point

I don't think Lit counts as a framework. It's much lower-level plumbing. And tagged template literals are part of the browser.

But lit's DSL isn't a part of the browser. Neither is lit's data binding/reactivity. Nor lit's rules on directives. Nor lit's tasks. Nor lit's context. Nor...

Yes, I would agree with that. And that's why "running natively in the browser" is not a remarkable feature of web components, because you will need something like lit anyway for using web components in a productive way. So you might as well use React, or any of the other billion frameworks.

> Web Components give the basic blocks of writing those frameworks easier.

No, they don't. Both for the fact that they need 20 more web specs to fix issues that none of the frameworks have, to the fact that they are actually pretty bad as basic building blocks: you can't control their rendering (once a web component is on the page, it will eagerly render, and will pull in and render whatever imports it has); shadow dom breaks all sorts of expectations; each is an isolated rendering block, so you can't control for batch rendering; there's no server-side rendering story to speak of, and that's only off the top of my head.

There are many more tehcnical reasons than I listed, but I'd have to hunt them down. There are many, many, many reasons why even the authors which originally really rooted for web components, and modeled their frameworks after them now moved awaya from them completely (Solid, Svelte, Vue).

There are also many, many, many reasons why even the new framework overwhelmingly _don't_ use web components for anything.

There are a few thoughts^

- Ryan Carniato (Solid): https://dev.to/ryansolid/maybe-web-components-are-not-the-fu...

- Ryan Carniato's stream on web components: https://www.youtube.com/watch?v=BEWkLXU1Wlc (you can skip to 1:37:17 for a specific discussion)

- Rich Harris (Svelte): https://dev.to/richharris/why-i-don-t-use-web-components-2ci...

- All these issues are still there, 4 years later: https://twitter.com/Rich_Harris/status/1198332398561353728

and so on and so forth.

> but JSX does not run natively in the browser. WCs do. There are compromises.

JSX is probably the absolute last thing frameworks care about. They do care about things like not jumping through hoops to make things work.

> Web Components give the basic blocks of writing those frameworks easier.

The argument of the post is that they should but don't really, and some new building blocks should be added to help with that.

The only good use cases for web components that I see is to use them for embedding encapsulated 3rd party widgets to prevent style contamination, kinda like iframes.

Composing them is absolutely horrid, as is sharing data between them.

Another nice use is encapsulating custom form elements since they can natively provide a value to the form instead of needing a surrogate hidden field and all that entails.

Embedding interactive content into a cms is I guess another surface but that's more semantic sugar and style encapsulation.

Reply on news.ycombinator.com