< Back
calendar

Sep 27, 2020

The Failed Criticism of Web Components

Why Lea Verou’s criticism of Web Components is misdirected

Header for posting The Failed Criticism of Web Components
Photo by LexScope on Unsplash

Here’s my response to Lea Verou’s article “The failed promise of Web Components” that was published last Thursday.

I was pointed to the article by someone on Twitter and first thought I was pointed to the article “The broken promise of Web Components” that was published in 2017, but that was not the case.

Verou make some good points in her criticism of Web Components, but why this leads her to dismiss Web Components as “a failed promise” is frankly beyond me.

She states that the promise of Web Components was that these would “make web development more accessible to non-programmers and easier for programmers”.

But according to Verou this never happened because “somewhere along the way, the space got flooded by JS frameworks aficionados, who revel in complex APIs, over-engineered build processes and dependency graphs that look like the roots of a banyan tree”.

Well, I agree on that. Frontend development has become way to complex in the past years. But what exactly does that have to do with Web Components?

The culprit seems to be webcomponents.org, which is a repository that aims to “make it easy to share, discover, and reuse web components”. Lea provides it as a bad example because according to her it was far from easy to use a component from here.

Well, again I can agree on that. I’ve been working with Web Component for about five years now and I have only found a few useful components in the past there when I was working with Polymer.

Besides that, I never even felt the need to look for components on webcomponents.org, nor have I ever met a colleague who even mentioned this repo.

It’s also the only example that Verou provides. Are Web Components really a failed promise because you think webcomponents.org is a bad example?

Maybe this article should have been called “The failed promise of webcomponents.org”.

Web Components have nothing to do with the current framework bloat that infects web development and it puzzles me why Verou comes to this conclusion based on one example.

Oh and she links to the old Polymer webshop demo as a bad example because it has an empty <body> tag which is only populated by JavaScript when the page is loaded. Obviously, when JavaScript is disabled the screen will be blank.

Again, what does this have to do with Web Components? This is an issue with single-page apps, not Web Components.

So to recap, Verou criticism of Web Components is actually about framework bloat and issues with single-page apps, based on webcomponents.org and an old Polymer demo.

Really?

There are better examples

To be fair, Verou makes some valid points and I have no doubt that her concerns are sincere. She mentions that Web Components should be usable by just including a script and a tag, should be accessible and that they should be themable among other things.

But these are issues that are hardly exclusive to Web Components and the main issues she cites are not even issues with Web Components but with frameworks and single-page apps.

So why single out Web Components? And why based only on webcomponents.org and an old Polymer webshop demo?

It just doesn’t make sense to me.

Besides that, it’s not hard to find way better examples of Web Components.

There’s generic-components, open-wc, shoelace, component.kitchen and my own initiative material-webcomponents to name just a few.

These are all examples of easy to use and accessible Web Components, although I admit that the accessibility of my Material Webcomponents library is still work in progress.

Someone as influential as Lea Verou should at least have taken the time to do some more research on Web Component libraries before she blames the technology for issues that are not even related to it.

There are other issues

Besides that, there are real issues with Web Components that need to be addressed.

For example, Web Components still don’t play nicely with native forms (although a potential solution is available), CSS pseudo selectors don’t work and we don’t have a way to easily update variables inside templates (proposal for a solution here).

Yes, a lack of accessibility and bloat are real issues in web development, but these are not specific to Web Components and it’s not very constructive to claim they are and dismiss Web Components as “a failed promise” for that reason.

Especially not when there are plenty of better examples available.

Web Components are not perfect, but then again, JavaScript and CSS aren’t either. We still can’t nest CSS rules, modularity is still an issue and the cascade continues to confuse developers.

But that doesn’t make CSS a “failed promise” any more than Web Components.

Verou concludes the article by stating she wants to work on fixing this situation. That’s a good thing, but it’s unfortunate that the article starts with dismissing Web Components as a failed promise, which does great injustice to the technology.

It obscures her otherwise fair criticism, although I believe it should be directed at frontend development at large and not at Web Components in particular.


Join Modern Web Weekly, my weekly update on the modern web platform, web components, and Progressive Web Apps delivered straight to your inbox.