Many Developers and Field Specialists agree that web-components are the future of web-development. Today, when each day required for development influences market greatly, the pace of innovation race is higher than ever. And using web-components lets one win some time in this race.
What are Web Components?
Actually, web components are not a specific tool, it is a group of standards that are used to decrease efforts required for development of the re-usable components. The essence of them is to develop a component once and then repurpose it for any project you need.
The component model of it includes 4 main elements, which are:
- Templates
- Custom Elements
- Shadow Dom
- HTML Imports
Let’s have a look at each piece separately.
1. Templates
Templates are used to define the markup for the code that we are going to repurpose later. They are inert themselves, but can be activated if required. To create a template use a simple declarative <template> element.
2. Custom Elements
Custom Elements are employed for defining your own HTML Elements as well as API. If you are creating some new elements, don’t forget to add a comment, so that if you go crazy, you would know what it is for a month later. You might wonder what element should be used for it, this is pretty easy, just go with <element>.
3. Shadow DOM
Shadow DOM is used to tell the behavior of custom elements and their presentation in DOM tree, which basically description of the hierarchy. Majority of web documents have only one DOM, but there can be inherit chain. To create a new Shadow DOM use .createShadowRoot on an element.
The advantage of Shadow DOM is that it provides encapsulation for scoped elements. This means that if we write e.g. CSS inside ShadowDOM, then in would affect only this specific DOM. This is not only very handy, but also makes naming convention so much easier.
4. HTML Imports
HTML Imports are required for reusing HTML Documents, which is basically the whole purpose of the web components, since they are a great way to save some development time.
There is a number of ways you can do that: @import in CSS or import {Module} from ‘./somewhere’ in JavaScript. To crown it all, you can do it in HTML as well, defining them in the beginning of the document.
Web-components are definitely the future of web-development. To start using them explore Polymer.js, which allows using web-components for modern browsers. For old ones Polyfills are used.
Following the instructions we described above you will be able to save a lot of time and optimize your efforts. Simply create template, a few custom elements, organize them via Shadow DOM and use them via HTML Imports. We hope with this article you will get a helping hand for creating your own web-components and will start actively using them.
Questions? Comments? Let’s talk about them in the comments section below.
