React and Angular are common libraries for developers. If you are familiar with these building components, then web components will feel similar. Web components comprise of the web platform APIs, and it enables developers to create custom and reusable HTML tags in web apps and web pages.
Why Are Web Components Used?
As developers, our unique set of challenges is known in the community and we always look for ways in which we can reuse the code in the new project. However, in the traditional approach and especially in the custom markup structure, the reuse of code has not been easy. Especially, with the complex HTML and its correlated script and style, you may have ended up writing codes to provide customized UI controls. Using this approach has most of the times turned your pages into a real mess.
Web component provides the much-needed relief as you are involved in the thick of things. It is composed of three main specifications and these can be used simultaneously. This provides encapsulated functionalities to create custom elements that can be reused anytime in the future without worrying about code crash.
- Custom Elements
As the name suggests, you can create custom elements and how they function. The custom elements created by you can be used as you desire in your user interface.
- Shadow DOM
Encapsulation is one of the important features of web components. In order to ensure that the different parts do not clash with each other, the style, markup structure, and behaviour need to be kept hidden and keep the code clean; this is where Shadow DOM plays a crucial role. This provides a separate way so that a separated/shadow DOM can be there for the element.
- HTML Templates
In HTML templates, the template and slot elements will enable you to write markup templates. These templates will not be displayed on the rendered page. Once done, these templates can be reused again multiple times for future projects.
In simple words, web components allow you to create reusable custom elements that are suited for different technologies. You can do this without the fear of code collisions. Shadow DOM brings encapsulation in HTML elements.
The basic approach for implementing a web component will look something like this:
Step 1: Specify your web component functionality by creating a class or a function. Use the ECMAScript2015 class syntax, if you are using a class. (Check out classes for more information)
Step 2: By using the CustomElementRegistry.define() method, you can register your new custom element. You can further pass it the element name that has to be defined, the function of a class in which the functionality is specified.
Step 3: If need be, you use Element.attachShadow() method to attach a shadow DOM to the custom element. You can add event listeners, child elements, etc. to the shadow DOM by using regular DOM methods.
Step 4: If need be, use and to define an HTML template. Use the regular DOM methods to clone your template and then you can attach it to your shadow DOM.
Step 5: You have the option to use custom element wherever you like on your page, just like you would do with any regular HTML element.
We will see a small example of how we can create a web component by following the above process.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<span style="font-family: Rubik;">const template = document.createElement('template'); template.innerHTML = ` <style> button { background-color: #4CAF50; border: none; color: white; padding: 15px 30px; text-align: center; text-decoration: none; font-size: 16px; cursor: pointer; } </style> <button>Say, Hello</button>`; class SayHello extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template.content.cloneNode(true)); const button = this.shadowRoot.querySelector("button"); button.addEventListener("click", function(){ alert("Hello!, you are doing good"); }); } } window.customElements.define('say-hello', SayHello);</span> |
We can attach shadow DOM with anyone of the two available modes. They are “open” and “closed”. Shadow DOM mode “open” allows you to access node from outside of the world through “element.shadowRoot,” and “closed” doesn’t allow you to access node from outside of the world as “element.shadowRoot“ returns null. Closed allows keeping complete control of the component at the author level and how the component should be exposed. Check this link out to know more about the web components and corresponding specifications and usage process.
History:
If you have been following the web components for the last few years, you would know that Chrome 36+ used document.registerElement() instead of the customElements.define() and implemented just a version of the Custom Elements API. Currently, it is called as a v0 and known to be the version of the standard that is deprecated. However, customElements.define() is in vogue and the browser vendors are starting to implement it. It is named as the Custom elements v1.
Browser Support:
Custom Elements v1 is there in Safari 10.1 (status), Chrome 54 (status), or Firefox 63 (status). Edge is in the development stage. Check for the existence of window.customElements:
const supportsCustomElementsV1 = ‘customElements’ in window; in order to feature detect the custom elements. Currently, the standalone polyfill available for the Custom Elements v1 until the browser support is widely available. However, in order to optimally load the web components polyfills, we recommend using the webcomponents.js loader. In order to asynchronously load just the necessary polyfills required by the browser, the loader makes use of the feature detection option.
The above information was all about the what, why and some examples on the functional part. So is that it? Well, NO! There’s a lot more content to churn out in web components. In the connecting blog, you will see how we create angular components, the available options to encapsulate it, when to use each option, and how to generate the angular elements. The next blog will give in-depth review on these topics…so stay tuned for more.
