This paper is a synthesis about I heared and rode about Web Components.
To make this article, I used mainly InfoQ video of Julien Vey and html5rocks web site.
Web Components is W3C standard which is at DRAFT status.So, you will have to wait before it arrived. However, it is possible to use because main actors of the web (Mozilla, Google ...) started to work on this specification.
What is a Web Component ?
Here is a good definition I found on article of Julien Vey d'InfoQ :
Web Components permit developpers to create HTML tags which are reusable and customizable.For example, here is a tag
Note : When it will be implemented and approved by W3C, it will be possible to reuse a component on all web navigator !
Why look at Web Component now ?
- It is a web standard of W3C.
- Main actor of web began to implement it.
- It will change way of working in web developpement because components will be reusable on all navigators.
Web navigators and Web Components
A good summary of specification and implementation is avaible here : are we component yet ?
Now, there is a lot web navigators that doesn't support Web Component.However, it exists emulation for Web Component : polyfills.Polyfills permits to start using Web Component.
Here are some project :
- Polylemer is a Google library ( there is a talk on Google I/O )
- UI library for Dart : web-ui
Here is an example of template :
Template is simply a reusable peace of code.You have to note that Web Component are parsed but not executed and picture aren't load in memory.
Shadow DOM permits to make encapsulation without iframes. So we will mask implementation of a tag.
For example :
In the source we have our tag :
When we will show the HTML web page, we will have :
The content are fill at execution.
To instanciate this shadow DOM, you can :
For example :
var shadow = ....
- Use Insertion point
We define a div with our content :
This tag will permit to show our content :
A Custom element will contain all we saw before :
In my web page :
<link rel="component" href="moncomposant">