Every Web developer at some point would have had a need to rely on some off-the-shelf component to implement a functionality, whether it is a plugin to display a date-picker or a component to display a fancy chart. These are essentially the building blocks to build a modern web application.However, the off-the-shelf components we choose often come with their own baggage.
It is either as a dependency with Framework X or an incompatibility with library Y. Often times, the best off-the-shelf component we could choose is limited by the bounds of the choices we have made in the past, like the framework we have invested in.It would be an utopia of modularity if we are able to replace one component with another without worrying about the repercussions. Web Components promises that exactly. In technical terms, Web Components are standard APIs (with questionable browser support) which enables anyone to create custom, self-contained HTML tags.
Unsurprisingly, any modern web developer would find this underwhelming, because almost all modern frameworks / libraries provide the above functionality in some form or the other. So, what exactly do Web Components offer?Web Components attempt to offer the same functionalities but without the baggage of dependency of other frameworks or libraries. It is truly self contained.If this piqued your interest, then the next obvious question would be: why is it not mainstream, if it offers the above benefits?
The simple and usual answer would be “Browser Support”. Though Web Components was first announced in 2011, it has taken until now to have reasonable support with different browser vendors. But, in the meantime the Web development community has come up with the likes of Polymer, AngularJS, React, etc. which has emulated the featureset of Web Components to an extent. Now, it is possible to use Web Components in almost all the modern browsers with just a few polyfills.Web Components is not one single specification, but a set of W3C specifications which provide the above mentioned features.
The specifications are:
- Custom Element – Ability to create new tags.
- Shadow DOM – Encapsulate styling and logic within a DOM element.
- HTML Import – Including HTML documents like scripts and CSS
- HTML Template – Way to handle reusable HTML chunks.
As always, the above specifications are in various levels of support from various browser vendors. But, thankfully, they are at acceptable levels.‘Yes’ would be the answer for “Can I start using this?”.
The real beauty of Web Components is the way it can integrate with an existing application. Since it is self contained, it can be used to just implement a widget on a single page. Many frameworks have internally started using Web Components. For instance,
Angular Elements compiles down to native Web Components (however, at the moment, it still doesn’t provide interoperability with other frameworks). Also, toolkits like StencilJS are promising. They provide a layer of abstraction which makes development of Web Components much simpler.
To conclude, there is no better time to invest in Web Components as it has become mature enough to power the Web Applications of today and tomorrow. Also, as a bonus, it aligns well with the micro frontend movement which is gaining traction in the recent times. Finally, to answer the titular question. Yes, Web Components is ready for Prime time.
.png)
.png)
.webp)
