Web Component

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 <my-own-tag> : 

<element name="my-own-tag">
 <template>
   html tag here
 </template>
 <script>
   // JavaScript
 </script>
</element

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 :

• x-tags : x-tags is a Mozilla JavaScript library which works on all Web Navigators.
• Polylemer  is a Google library ( there is a talk on Google I/O )
• UI library for Dart : web-ui
• toolkitchen

Web Components 

Templates

Here is an example of template :

 <template id="">
 </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

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 :

<div id="mondiv"></div>


When we will show the HTML web page, we will have :

<div id="mondiv">
<h2>mon contenu</h2>
</div>

The content are fill at execution.
To instanciate this shadow DOM, you can :

• Use JavaScript

For example :

var shadow = ....
shadow.innerHtml="<h2>mon contenu</h2>"

• Use Insertion point

We define a div with our content :

<div id="host">
</div>

This tag will permit to show our content :

<content></content>

Custom element

A Custom element will contain all we saw before :

<element name="moncomposant" extends="button" constructor="moncomposant>
     <template>
    </template>
    <scritp>....</script>
</element>

In my web page :

<link rel="component" href="moncomposant">
<moncomposant></moncomposant>

Other things

In this paper, I didn't address mutation observer and model driven view which permit to make databinding and evaluate performance...

More infos

http://www.html5rocks.com
http://www.infoq.com/fr/presentations/web-components
http://www.infoq.com/fr/news/2013/06/webcomponents