Why I’m Moving on to Web Components and Not Looking Back
The Self-Taught Engineer

So here’s the issue — you’re not using web components, you’re using polymer. And polymer is a third party external library, no part of which is built into the browser. It’s much heavier and slower than preact, and has a much less familiar API to developers. Try using web components without polymer and see how that experience goes — spoiler alert: it’s not pretty.

Basically, the big difference here is virtual dom diffing and rendering. This feature is essential for a modern web app, and web components not only don’t have this feature, but there aren’t any plans at all to add it. As such, you must use a third party library in order to get it (polymer, skatejs, etc), and at that point you have lost the primary benefit of web components — that they are browser-native and a web standard.

You speak a lot about build tools here and how they aren’t necessary with polymer. This is also rather confusing. Polymer requires build tools for production optimization and efficient local dev, just like any other framework. And react etc. don’t actually require build tools at all — it’s only if you want to use jsx that it requires this. There are plenty of other ways to build out vdom trees by requiring templates at runtime (like polymer does), or writing it in hyperscript instead.

The final blow to using web components / polymer right now is the performance hit. The fact is that you are guaranteed to get inferior performance with polymer than you would with something like react/preact/vue/etc. Let’s talk about polyfills first. Browser support is slowly getting better, but IE does not and never will support web components, and it’s end of life is 2025, so you’re committed to always polyfilling there. And if you don’t want to polyfill for everyone, you are committing to code splitting, which means you likely need a build tool. HTML imports aren’t supported in any browser other than chrome, and it doesn’t look that promising that other browsers will adopt them at all, so you’re definitely polyfilling everywhere other than chrome for imports, which are required for a polymer app to run. Polymer also does not have server rendering, and they have no plans currently to add it, which means that you are going to be shipping a blank html root and relying entirely on JS to render your app. This is an obvious huge performance hit here as any user needs to wait until the javascript loads for first paint. On top of that, this is this a blow to SEO for any search engine other than google, and also to any type of social sharing functionality which relies on crawling the html without javascript. Basically, you are going to need to run a prerender service if you want to run a site that has consistent SEO and share meta.

It could be argued that if you have fast internet and a good mobile device, the performance impact is minimal, and that most people use google so it’s ok for SEO, and that you don’t really care if people share your site on social media and it turns out blank, or with the same meta for every view, and that you could not use build tools and not optimize for production to make things simpler. But not only are all of these extremely weak arguments, but the real question is why make these sacrifices?! You are not using web standards or reducing your lock-in to frameworks by using web components, because you’re using polymer, which is a third party framework. You are giving up a TON of performance benefits and adding a number of extra infrastructure steps (polymer cli, prerender, carefully calculated selective polyfills) for literally no reason. You can just use react/preact/vue or any other better third party framework, and get a much more supportive community and syntax, easier hiring, simple, well-tested SSR, no and need for polyfills at all, with no downside.

I want web components to be good, don’t get me wrong. I experimented heavily with them to see if there was a chance that they could be used on their own without third party framework support to build an app, because this would be fantastic. But unfortunately right now, they are not anywhere close to ready, and it’s not worth using them. And polymer is just flat out worse than your other options, since it consistently needs polyfills, uses foreign conventions that developers have not adopted despite its years of existence and marketing by google, and it doesn’t have server rendering at all.