HTML5-Web components

Example from the video

You can download the archive of the example from the video at: VideoUsingWebComponents.zip

You need to unarchive it in your Web server htdocs directory of your WAMP/MAMP/LAMP http distribution, for example. Then open the index.html file located in the directory.

Web components

INTRODUCTION

Web components provide a standard way to built your own widgets/components using similar methods to those used by browser developers to build the <video>, <audio> or <input type="date"> elements, for example.

Web components enable you to use custom HTML elements in your HTML documents, that will render as complex widgets: a better looking calendar, an input text with vocal recognition, a nice chart, etc.

Let's start with an example! This code...:

1. <x-gif src="http://i.imgur.com/iKXH4E2.gif" ping-pong></x-gif>

... will render in your document an animated GIF, and it will loop forever in ping-pong mode: the order of the animation will be reversed when the last image is reached and again when the animation goes back to the first image.

Click the image to see a real demo with the animated GIF playing, or visit this Web site.

If you look at the source of the demo page, you will note the following at the top of the page:

1. <link rel="import" href="dist/x-gif.html">

This is new! It's called an "HTML import"! If your browser supports HTML imports, you can now import another HTML document, that will come with its own HTML, CSS and JavaScript codes, into your HTML page . The code for the animated GIF player, rendered when the browser encounters the custom HTML element <x-gif>,  is located in the imported HTML file (and this HTML file can in turn include or define CSS and JavaScript content).

Even more impressive: if you use the devtools or the right click context menu to view the source of the page, you will not see the DOM of this animated GIF player:

...and your document will still be valid. Looking at the source code or at the DOM with the devtool's inspector will not reveal the source code (HTML/JavaScript/CSS) used for creating it.

THERE ARE ALREADY HUNDREDS OF WEB COMPONENTS AVAILABLE

Indeed, you can use many Web components made by others. The webcomponents.org Web site links to several Web components repositories, such as customelements.io where you will find lots of Web components. Usually, you will need to import the HTML file that defines the components you want to use, and maybe also a polyfill if you want to use them with browsers that do not yet support Web Components.

Example: let's go to the customelements.io home page:

We then search for Web components tagged with the "voice" tag and find input fields with voice recognition, and a text area that could vocalize the text:

Let's click on the first one:

Now, please try the demonstration of this component!

Also, re-using Web components is easy :-)

Notice that Google with the Polymer project and Mozilla, with the X-Tag project, also offer huge sets of components for creating rich UIs with a common look and feel.

CURRENT SUPPORT

Web components are built on four different APIS

In this lesson, we will talk about "Web components". This is not one single API - rather it's what we call an "umbrella" API, built on top of four W3C specifications, that will be detailed in subsequent lessons:

1. The HTML Templates specification (W3C Working Group Note)
2. The Shadow DOM specification (Working Draft)
3. The Custom Elements specification (Working Draft)
4. The HTML Imports specification (Working Draft)

You can check the current support for these APIs here: http://status.modern.ie/ and http://www.caniuse.com.

Currently (as at December 2015), only Google Chrome and Opera natively support these four APIs. Other browsers support only some of them, or have incomplete support. However, polyfills are available, and Web components frameworks, such as Polymer by Google or X-Tags by Mozilla include a polyfill, that adds support for most modern browsers (> 2013).

With a polyfill, Web components can be used in all modern browsers (> 2013)

HTML templates are supported by nearly all modern browsers, including mobile browsers:

Shadow DOM is supported by Chrome and Opera, and FireFox offers partial support:

Custom Elements is supported by Chrome and Opera, and FireFox offers partial support:

HTML Imports is supported by Chrome and Opera, and FireFox offers partial support: