Web Components a New Perspective to Web Development

This new concept it was created jointly by Firefox and Google and promises change to 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: 

1. Templates

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.

Demo: http://jsfiddle.net/warpech/7y6kp/

2.Shadow DOM

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 provides to web developer create own component like tag <video> or <img>.

Demo: http://jsfiddle.net/Wnsf6/

3.Custom Elements 

Custom Elements can react to the DOM lifecycle events. That enables them to have a certain behavior when they are added to DOM, their attributes change or they are removed from DOM.

Is possibility to create own first-class DOM members (fist-class DOM could be considered <div>,<p>,<br> etc ... ).

Demo: http://jsfiddle.net/7y6kp/7/

4.Imports 

Imports load external resources, such as Templates or Custom Elements. Imported HTML files can contain templates, stylesheets, and scripts. They get executed when the import is loaded.

Why do I care about this? 

• You are a HTM user, this will help you do more advanced this easily.
• You are a front end dev, you want to reuse components across pages.
• You build single pages apps and want a better way to organize things.
• You are interested in the direction that the web platform is heading.

Unfortunately, these components were available just to Google Chrome Canary or for test in jsFiddle.

But is possible use Polymer or Component Kitchen to use web components in another browser.

Here is a good presentation.

Here is a site with discussions and best-practices:  http://webcomponents.org