Web Components, the Next Generation Web Development Markup

A lot of progress has been made since the introduction of the Web Components back in 2011. Basically Web Components are the sets of several separate technologies. You can think of Web Components as reusable UI (User Interface) widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery, mootools and Dojo. Web Component is new and still-developing

There are bunch of polyfills to fulfill the compatibility issue of browser with web components as we know that Web Components are under-developing. So we can use Polymer, webcomponent.js, X-Tags and Bosonic. We are not discussing about these great tool here. I recommend you should see them by yourself.

Why Use Web Components

Web Components give developers an easier way to create Web/Mobile sites and recyclable widgets on these sites with the help of the HTML, CSS and JavaScript they already know. So that mean you don’t have to learn a new language for using Web Component’s.

Four Powerfull tools of Web Components

1.  Shadow DOM

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree. Consider a simple slider:

<input id="foo" type="range"/>

Put this code into any browser, and see the magic:

Shadow DOM is sounds like nice feature and it is. Basically in web documents, there is only one DOM. Think about DOM hosting DOM, which hosts more DOM. You’ll see something like this in Chrome inspector (note #shadow-root, which is completely encapsulated DOM)

▾<your-element>
▾#shadow-root (user-agent)
<div class="profile">
<img src="" class="profile-img">
<div class="profile-name"></div>
<div class="profile-social"></div>
</div>
</your-element>

2.  Templates

Insert bunch of clone-able Markups. Can be activated for later use

3.  Custom Elements

Create new HTML elements-expand HTML’s existing vocabulary. With the Custom Element we can define our own element. This can be anything, But your elements must have a dash/hyphen, to avoid any naming clashes.

▾<your-element>
<div class="profile">
<img src="" class="profile-img">
<div class="profile-name"></div>
<div class="profile-social"></div>
</div>
</your-element>

4.  HTML Imports

Import the chunk of HTML code with import tag. Importing files into our pages comes in many shapes. For CSS, we have @import, for JavaScript in ES6 modules we have import {Module} from ‘./PATH’;, and finally, HTML. We can import HTML components at the top of our document to define which ones we need to use in our app

<link rel="import" href="your-element.html">

<!-- <your-element> is now available-->
<link rel="import" href="google-map.html">

<google-map></google-map>

You can find out more about Web components here. webcomponent.org