Web components: Introduction

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

Web components enable you to use custom HTML elements in your HTML documents, that 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...:

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

... renders an animated GIF, and it loops forever in ping-pong mode: the order of the animation is reversed when the last image is reached and again when the animation goes back to the first image.

Click on the image to run the animated GIF demo, or visit this Web site.

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

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 code-base, 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.

Web components availability

There are already hundreds of Web components made by others that you can use. On the webcomponents.org Web site, you will find lots of them. Usually, you 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 Web Components Web site.

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:

Now, please try a demonstration of this component!

As you see, re-using Web components is easy :-)

Notice that Google, with its Polymer project and Mozilla, with its X-Tag library, 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 are talking about "Web components". Note that this is not a single API - rather it's what we call an "umbrella API", built on top of 4 W3C specifications, which are going to be detailed in subsequent lessons.

The main W3C Web Components resource is on GitHub:

The HTML Templates specification
The Shadow DOM specification (Working Group Note, part of the DOM specification) - see also this MDN's documentation "Using shadow DOM"
The Custom Elements specification is being incorporated into the W3C DOM specification and the WHATWG DOM Standard, the W3C HTML specification and the WHATWG HTML Standard, and other relevant specifications. Please check the W3C Web Components repository for continuing discussions about this subject.
The HTML Imports specification (HTML imports have been deprecated, see further material in this chapter)

You can check the current support for these APIs here: Microsoft Edge's Web Components and on CanIuse:

HTML templates are supported by nearly all modern browsers, including mobile browsers (see also this support table online).
Shadow DOM v1 is supported by Chrome and Opera, and FireFox/Safari offers partial support (see also online).
Custom Elements is supported by Chrome and Opera, and FireFox/Safari offers partial support. Edge is implementing them (see also online).
HTML Imports is deprecated, but can be used with polyfills . A new way to import Web Components using JavaScript imports is under consideration. More about that in the "HTML imports" material later on.

HTML imports have been replaced by a more standard way involving JavaScript imports (see discussions).

Page updated

Google Sites

Report abuse