What are Web Components?
Web components is a feature that is being incorporated in HTML5 DOM specifications by W3C. Web components are a set of API’s that facilitate the creation of new custom, reusable HTML tags/elements that can be used in web pages and web apps with their functionality isolated from the rest of your application code.
Web Components building blocks
Web components are composed of 4 pillars/building blocks.
Custom elements API provides developers with the ability to create fully-featured standalone DOM elements having their own behavior and CSS styling. Below is one such example, where we will create an image slider, in which image will change after an interval of 1000ms.
We will create a class named ImageSlider extending from HTMLElement. Inside the constructor, we create an image element and set the src of the image and change it after a regular interval of 1000ms and append it to the parent that is the <image-slider> element. The image urls are fetched from the data-images attribute set to the <image-slider> element.
See the above code in action here on CodePen
There are a few lifecycle callbacks available with custom elements, one of which we will be using later in this post while creating a web component:
connectedCallback — Called every time the element is inserted into the DOM.
disconnectedCallback — Called every time the element is removed from the DOM.
attributeChangedCallback — The behavior occurs when an attribute of the element is added, removed, updated, or replaced.
A shadow tree is a node tree whose root is a shadow root. Shadow DOM provides style and markup encapsulation. To create shadow DOM, select an element and call its createShadowRoot method which returns a fragment to which you can append content. This fragment returned is called as Shadow Root. The shadow root and its children are not visible to the user, but browser renders them when it encounters our tag. It allows to isolate DOM of our component and scope and simplify CSS.
You can think of shadow DOM as a scoped subtree inside your element. A Shadow root is a document fragment that gets attached to the host element. When the shadow root is attached that is how the element gets its shadow DOM. Below is how we create a shadow DOM.
It defines a new <template> element, which creates chunks of HTML. Templates allow declaration of markup fragments which are parsed by the browser as HTML and are not interpreted at page load time, but can be used at a later stage. These templates can be instantiated, cloned and reused. Everything inside a <template> tag is considered as inert by the browser. That means that any elements that refer to other resources for ex. <img>, <video> etc. do not make a http request to the server and <script> tags inside this template are not executed.
Using HTML templates you can define templates. But what if the HTML markup is quite large, your HTML file will look shabby. Won’t it be good if we can keep our template in a separate file? HTML import is here to our rescue. HTML imports allow to import templates from different HTML files. You can organize your templates in different files and then import them as below:-
Below is an example of an ImageSlider Web Component that changes the image after every 1500ms and also updated the image title.
If you want css you can write it in a separate file and include that css file in your template like this
See the above component in action Here at Codepen
Not all the browsers support Web Components as of now. But there are several polyfills using which you can create your own web components. Below is a support table depicting the status of Web Components support. Currently, Chrome and Opera have the best support for Web Components.