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.
- Custom Elements - allows developers to write custom HTML tags (more on this later)
- Shadow DOM - provides a black box for developers to write obstructed logic
- 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 👍
No tooling required 👍
<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?
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?