What is Web Components

Web components is one of my favorite browser APIs and also one of the least talked about. It grants many features to developers and allows us to write extremely reusable components that are extremely declarative and easy to consume.

What is Web Components

While being the future of web development, web components are also my new favorite web paradigm and also one of the least talked about. It grants many features to developers and allows us to write extremely reusable components that are declarative and easy to consume. Let's take a look at it today.

The Specification

Web components is a suite of standard web specifications. Their existence means developers can create light-weight, reusable and powerful UI components for the web. Consuming a web component could be as simple as importing a JavaScript module and writing a HTML tag. The main specifications are:

  1. Custom Elements - allows developers to write custom HTML tags (more on this later)
  2. Shadow DOM - provides a black box for developers to write obstructed logic
  3. HTML Template - kinda cool, but it has limited use case

I will talk mainly about Custom Elements today since it is the pillar that holds up the web component specifications.

Some things about Custom Elements

Platform Agnostic πŸ‘
Custom elements are implemented with a JavaScript class and consumed by simply writing a HTML tag. This means you can use them anywhere. You can use them on your bare index.html file or within AngularJS, ReactJS, VueJS, literally anything else that runs on a .html file.

No tooling required πŸ‘
In essence, everything on the Front-end can be categorized into 3 types of logic: HTML, JavaScript and CSS styles. Custom elements embrace this sense of minimalism. To write a custom element, all we need is a JS class to declare a class (the implementation), a single line of JavaScript to define the custom element (the declaration) and calling <my-new-custom-element /> on the index.html file (the consumption). Unlike React or Angular, the tooling is optional. We can introduce tooling for optimization or specify types or linting, but they are essentially optional.

Easy consumption πŸ‘
Since custom elements are just user-defined HTML tags, they are incredibly easy to consume. We can just use them as normal HTML elements, passing configurations as attributes and not having to worry about the underlying complexity and implementation.

Too lightweight πŸ‘Ž
Out of the box, custom elements only offers a handful of lifecycle events. This is a very slim selection as compared to the React components of the world. To combat this, tooling such as StencilJS and Polymer exist to provide a higher-level API while being very performant since they eventually compiles down to a Custom Element.

Who else is using Web components?

In a blog post from 2018 titled "Removing jQuery from GitHub.com frontend", GitHub engineers talked about how certain UI widgets are implemented with Web Components.

Ionic framework and design systems in general
Digital design systems are the perfect use case for web components. Once it is written, the individual UI components should as much as possible, across as many platforms as feasible. Writing or exporting them to Web Components means they can be used anywhere regardless of front end framework. I wrote a piece about my internship experience at Staizen and mentioned how they utilize StencilJS (a web component based abstraction) to write their design system while exporting the components to ReactJS apps. Check it out here.

How future proof is this?

Front-end frameworks are constantly changing. This is one of the biggest gotcha that all front-end developers face. As a consequence, we often see developers showcasing their blogs on dev.to, talking about how they write their blogs without a JavaScript framework. I understand where they are coming from and this is where web components shine. Since web components are browser specifications adopted by W3C and WHATWG, they are here to stay. This means custom elements I write today will still be maintainable for quite a while with minimal effort. I cannot say the same about my tooling-heavy React applications.

Additional Reads

Custom Elements v1: Reusable Web Components | Web Fundamentals
Custom elements allow web developers to define new HTML tags, extend existing ones, and create reusable web components.
An Introduction to Web Components | CSS-Tricks
Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter threads bemoaning the state of what
Web Components Tutorial for Beginners [2019] - RWieruch
In this Web Components tutorial, you will learn how to implement your first web component (custom elements) with HTML, CSS, and JavaScript. It is aimed at beginners who haven’t used web components before ...
Stencil - A Compiler for Web Components - Stencil
A powerful toolchain for building Progressive Web Apps and Design Systems
Framework Integration - Stencil
A powerful toolchain for building Progressive Web Apps and Design Systems

Photo by Shane Aldendorff from Pexels