Just recently I came about this new thing called Web-Components. My first response was “What exactly are Web-Components ?, What do they give over JS frameworks like Angular, React and Vue ?”
First things first, Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. “Doesn’t this sound familiar to Directives(Angular), React components and jQuery plugins? It does, right !”
I agree they are similar in a lot of ways to all these things but have you ever tried using an Angular 2 component in React or vice versa? I can’t imagine the amount of complex code you will have to write to make these work together or, to make an easy way out you would just create a React version of the same? (The horror of maintaining the same component in 2 frameworks/libraries). Web components make this look like a piece of cake. You could just write your own web component and use it any framework you like, that’s what makes it so awesome.
I’m not going to do a tutorial on how to write your first web component, there are too many articles that’ll help you do that. But let’s look at the what web components are based on.
- Custom Elements
Helps in laying the foundation for using custom tags.
- Shadow DOM
Defines the encapsulated the style and markup making sure the outside style does not interfere
- HTML imports
Defines the inclusion and reuse of HTML documents in other HTML documents.
- HTML Template
Declare fragments of HTML that can be cloned and inserted in the document
Custom elements help you create new HTML elements and let you use Templates and Shadow Dom to encapsulate and restrict the styles to the component only. These new elements can be then included in the application using HTML imports.
To visualize this let’s look at the bootstrap component
<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
This, when converted to a web component, would just look like
Of course, we would need an API to pass the list items to this component and you’re almost there.
The video tag that we use every day uses the above specifications
<video controls src=”/path”></video>
Imagine your HTML code looking clean and minimal. Plus you can use the component in Angular, React, Vue or wherever you want, risk-free!
<my-header></my-header> <my-sidebar></my-sidebar> <!-- rest of the HTML code! --> <my-footer></my-footer>
Web components have been trending in the recent past but creating them hasn’t been easy since the official documentation and examples are not up to the par and community is relatively not as strong. This is where the libraries like Bosonic, Polymer, SkateJS, Slim.js and Stencil come in. They have easy starters strong community support and good examples to start with.
Web components are important because they will help the developers create long-living interoperable components that can adapt to the ever-changing JS frameworks.