Web Components a new perspective to web development
This new concept it was created jointly by Firefox and Google and promise change some paradigms.
"The component model for the Web called Web Components consists of four pieces designed to be used together to let web application authors define widgets with a level of visual richness not possible with CSS alone, and ease of composition and reuse not possible with script libraries today."
Web Components consist of 4 proposals:
Templates are parts of DOM that could be reusable, and this Templates will be append to the DOM. That means <img> sources are not downloaded, scripts are not executed until necessary, saving on bandwidth and processing ,and also the script necessary to execute this component in this example querySelector is hidden on the Template to avoid influencing in the other part of the page.
Shadow DOM provides encapsulation to markup and style, for example a <video> tag , this tag has many scripts to provide functionality . Each of those controls is implemented as a<div> inside of the<video> tag that is actually not accessible for the scripts on the page but is rendered on users screen.
Shadow DOM is a tool that provide to web developer create own component like tag <video> or <img>.