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 Components 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
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:
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)
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.
4. HTML Imports
You can find out more about Web components here. webcomponent.org