Web Components

Posted Sep 16, 2020

1 min read

Web Components belong on your technology radar. The JavaScript browser ecosystem churns constantly, frameworks come and go, and Web Components are one of the few component models that outlive whichever SPA framework is fashionable this year — they ship as a browser standard, not a library you have to keep upgrading.

Here is what they buy you, and where they stop:

Components built in a framework-agnostic way, so they survive a framework migration.
They work inside large Content Management Systems (CMS) and within Markdown.
They borrow the component architecture style of popular SPA frameworks and pair with modern JavaScript transpilers like TypeScript.
They are cross-browser compatible. The standard dates to 2011 and is now supported by all modern browsers.
Component development is quick and independent of any larger application.

The honest catch: Web Components do not provide data binding natively — that is where your framework still earns its keep. You can generate them from Angular, React (Preact could be substituted) or Vue, but weigh the output size and runtime performance before you do; wrapping a full framework to emit one component is often a poor trade.