Learn more about Web Components with these demos

Ryan Boudreaux explains what the Web Components specification is and how it can be used to create reusable modules for web applications.

If you've not heard of "Web Components" then it's time to catch up a bit on one of the latest bleeding-edge web technologies being developed and specified today mostly by members of the Google Chrome Team and by the Word Wide Web Consortium (W3C).

The W3C team includes Dimitri Glazkov and Ian Hickson who have helped complete the first draft of the W3C Web Components specification, which describes the way to include and reuse HTML documents within other HTML documents.

In the W3C public mailing list message dated March 7, 2013, Dimitri stated that the spec looked really small and he is attempting to keep it that way. He also pointed out that Ian incorporated the HTML spec and that very little is left to add except a better introduction and examples of the spec in use.

What are Web Components?

So, what exactly are Web Components and what are the possible uses in your web implementations?

Web Components are essentially a set of static templates that make it possible to create rich web user interaction (UI) using CSS and HTML markup only. For instance, creating a button, contacts widget, or hover element effect, are examples of things that currently would have all of the properties in the tag with calls to JavaScript or other scripting; however, with web components, developers would be able to create widgets and UI elements that are from reusable modules. An example of a web component HTML code snippet would look something like the element, link, and tag presented below for a contacts widget:

<!DOCTYPE html>
<html lang="en-US">
         <element extends="contacts" name="x-contacts-widget">
               Contact widget functions here
            <template id="mytemplate">
      <link rel="component" href="components/x-contacts-widget.html"/>
<x-contacts-widget></x-contacts-widget >

According to the Google Chrome Team, web components will allow web developers the freedom to create embedded widgets and reusable libraries and frameworks. One of the key players in defining the web components is the <template>, which is the blueprint containing inert chunks of clone-able DOM elements that can be activated for later use, such as Model Driven Views (MDV). Custom elements make up the toolkit of web components, which create new HTML elements, expand HTML's existing vocabulary, and extend existing DOM objects with new imperative APIs. The Shadow DOM is the glue that holds it all together, with the building blocks for encapsulation and boundaries inside of the DOM. Included as a support for web components are style encapsulation, with knowledge into the applications' state, such as DOM changes with MutationObserver, model changes with Object.observe(), and CSS variables such as calc().

Web Component demonstrations

The Google Chrome Team has created the presentation <web>components</web>, which is best viewed in Google Chrome Canary -- the experimental release of Google's web browser. It might be a less stable version of the popular browser, which is why it is called "Canary" -- derived from the way canaries were used in the early days of coal mining to detect deadly gasses or a lack of oxygen, which meant it was time to exit the mine soon. Similarly, Google Canary is named as such so that it can capture all the testing of bleeding-edge technologies such as Web Components, which might not fully work just yet, but are being tweaked in Canary so that they are fully functional. Paul Irish, part of Google Chrome's Developer team wrote a nice review of the features of Chrome Canary for Developers. As you can imagine, he is a strong proponent of using the testing browser version for web developers to play around in their new sandbox.

To view the Web Components presentation in Canary you will need to enable a few extensions, including experimental WebKit features in about:flags, experimental JavaScript in about: flags, and Show Shadow DOM in DevTools. Once these are enabled successfully, you should receive three smiley faces as shown in Figure B below as viewed in Chrome Version 27.0.1444.3 Canary:

Figure B

For example, when I open the presentation in Firefox 15.0.1, the same slide shows that the Object.observe() is not available as shown in Figure C:

The first demonstration featured on slide six utilizes the <x-gangnam-style>< /x-gangnam-style> web component to illustrate a hover effect, which results in the tiny pop-up of the gangnam dance figure along with a gangnam style music sample, as shown in Figure D:

Another demonstration that goes a bit deeper into the HTML code behind the web component is the "Mega Button" example on slides 63 and 64, and when clicked, produces an audible mooing cow. The extend existing [custom] elements starts with the demo x-megabutton.html that contains the following code snippet:

<element name="x-megabutton" extends="button" constructor="MegaButton">
    MegaButton.prototype = {
      megaClick: function(e) {

The demo "yourapp.html" contains the following code snippet that allows you to use the "Mega Button" web component:

<link rel="components" href="x-megabutton.html">
<x-megabutton>Mega button</x-megabutton>
The "Mega Button" demo shown in Figure E results in the large button on hover, and then the audio "moo" clip, once clicked:

Figure E

Other demonstrations include a meme generator, and a tab component using web components.

More resources

The following list of resources is also found at the end of the web component demo presentation and I have listed several those below:

  • Web-Components-Polyfill - This repository uses Git Sub modules, and you will need to run 'git submodule init' and 'git sub module update' from the top level directory of the project working tree before you can run tests, for example.
  • Mozilla's x-tags Custom Elements Polyfill - Based on the current W3 Web Components draft, X-Tag enables the custom element portion of the proposal. Custom elements let you register new tags/elements with the parser so they are recognized and inflated with special abilities you define, which works on all browsers.
  • Model-driven Views (MDV) - MDV is a JavaScript shim which partially implements a design for HTML that supports a sensible dynamic separation between page display and the data which drives it.


Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...


Editor's Picks