Ten years of Web Components
In 2021 we mark the 10th anniversary of Web Components, a set of technologies first introduced at the Fronteers Conference of 2011. Google was one of the first to bet on this new proposal, with the Polymer library’s announcement in 2013. The five years that followed the launch of Polymer were entirely dependent on polyfills. Some specifications even got deprecated along the way (R.I.P. HTML Imports). However, the technologies received constant attention, and browsers like Firefox and Chromium delivered native support a few years back, leading to increased Web Components adoption and setting a significant milestone in web development.
Hundreds of duplicated components written in various libraries or frameworks saturate the internet. We could build a single, generic component, developed with core Web Component technologies and few to no dependencies. How many tabs components or libraries have you encountered until now? If your answer is “Not that many…”, here’s a list with the top 10, according to one site: 10 Best Tabs Components In JavaScript & CSS (2021 Update) — CSS Script.
Web Components provide developers with the tools, standards, and freedom to materialize their envisioned custom elements (i.e., <generic-tabs>), but they also offer a benefit that is not obvious. These technologies empower the community to be inventive and offer the possibility to create a new collection of generic and universal HTML5 elements.
In her article, The failed promise of Web Components, Lea Verou perfectly outlines the need for simplicity and universality in the Web Components ecosystem:
Only one component of a given type in the directory, that is flexible and extensible and continuously iterated on and improved by the community. Not 30 different sliders and 15 different tabs that users have to wade through. No branding, no silos of “component libraries.” Only elements that are designed as closely as possible to what a browser would implement in every way the current technology allows.
Getting started with building Web Components is also more accessible than most would think. Nowadays, the most popular libraries and frameworks (Angular, React, Vue, etc.) offer the option to export their components to Web Components, which you can use in any other web project. But there are lighter options available that are not as beefy as an application library.
One such library is Lit, the spiritual successor of the Polymer project. It helps developers skip boilerplate when writing Web Components, elegantly handles reactivity, is inter-operable and future-ready while still packing a tiny footprint of around 5 KB (minified and compressed).
Here’s an elementary example from the Lit website:
That’s all you need to start using this new custom element:
If you prefer TypeScript, you can reduce the size of your code-base even further, as Lit also offers a few decorators:
For more complex use-cases, Lit provides a perfect balance of readability and convenience when creating Web Components.
The beauty of native browser APIs and technologies comes from the fact that you can develop your functionality with zero dependencies, as small as possible, and closer to the platform than any library or framework!
It’s good to keep in mind to choose the right tools for the job. Here’s a naïve vanilla Web Component that displays the initials of a name in an avatar like manner:
The above is a straightforward example, easy to understand, and easy to use:
Web Components should be simple, self-sufficient, context-independent, and without branding. The Shadow DOM is an enticing technology, and the appeal of style encapsulation is enough to draw many developers into building the “silos of component libraries” that Lea mentions.
Not everything needs to be a Web Component. Sometimes a custom element is enough, even more so when building large applications without relying on a framework. A proven CSS methodology is usually adequate and better suited for branding and styling an application or composing a design system.
Web Components are only going to get better in the coming years. As the specifications continue to evolve, I think that most, if not all, open-source contributors will focus on developing genuinely ubiquitous components.
It might seem daunting to start building Web Components, but the community provides many valuable and up-to-date resources. Here are a few that I recommend:
- Using custom elements — Web Components | MDN (mozilla.org)
- Building Components | Web Fundamentals | Google Developers
- What is Lit? — Lit
- Guides: Open Web Components (open-wc.org)
I’m curious to know how you use Web Components to build new things 😃.
