Over a million developers have joined DZone.

Introduction to Web Components

· Java Zone

Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience, brought to you in partnership with JetBrains

Set of new technologies

Web Components

Web Components is an umbrella term for the set of upcoming standards for web development (see the W3C Web Components page). Each on its own is a useful contribution to the current toolset for a web developer. When used together, they form a completely new paradigm of how web applications are created.

Web Components consist of four standard proposals and we’ll take a closer look at each one:

  1. Templates
  2. Shadow DOM
  3. Custom Elements
  4. HTML Imports

1. Templates

Templates define reusable parts of DOM. Whatever is in a Template is not executed until the Template content is actually appended to the DOM. That means <img> sources are not downloaded and scripts are not executed until necessary – saving on bandwidth and processing. Also, whatever is in a Template is hidden from querySelector so the scripts on your page won’t accidentally manipulate the original content of a Template.

Using Templates is easy. See the following example:

<template id="tpl">
Hello world!

var tpl = document.querySelector('#tpl');
tpl.content.querySelector('.name').textContent = "World";
var clone = document.importNode(tpl.content, true);


Hello World!

Live code on jsFiddle (use Chrome Canary with Web Platform features enabled)

More info on HTML’s New Template Tag by Eric Bidelman.

2. Shadow DOM

Shadow DOM provides markup and style encapsulation.

This is a feature that was used by browser vendors for a while. Let’s think of a <video> tag. It consists of controls like the play button, progress bar and the volume controls. Each of those controls is implemented as a <div> inside of the <video> tag that is actually not accessible for the scripts on the page but is rendered on a user’s screen.

Shadow DOM is a tool that lets the web developer create his or her own hidden encapsulated markup and styles in the same way in which
<video> controls are made.

The simplest example of using Shadow DOM is:

<button>Push me</button>

var host = document.querySelector('button');
var root = host.createShadowRoot();
root.innerHTML = 'Do not <content></content>!';


Do not Push me!

Live code on jsFiddle (use Chrome Canary with Web Platform features enabled)

More info on Shadow DOM 101 by Dominic Cooney.

3. Custom Elements

Custom Elements = Templates + Shadow DOM.

With the combined power of Templates and Shadow DOM, you can create first-class HTML elements that extend from the browser.
What is great about Custom Elements as opposed to, say, jQuery plugins is that being first-class DOM members, the Custom Elements can react to the DOM lifecycle events. That enables them to have a certain behavior when they are added to DOM, their attributes change or they are removed from DOM.

A simple Custom Element can look like that:

<template id="myGravatarTemplate">
<my-gravatar email="albert.einstein.starcounter@gmail.com"></my-gravatar>

function updateImg(img, email) {
    img.setAttribute("src", "//www.gravatar.com/avatar/" + SparkMD5.hash(email));

var MyGravatarElementPrototype = Object.create(HTMLElement.prototype);
MyGravatarElementPrototype.attributeChangedCallback = function (attributeName, oldVal, newVal) {
    if (attributeName == "email") {
        updateImg(this.shadowRoot.querySelector('img'), newVal);
MyGravatarElementPrototype.createdCallback = function () {
    var t = document.querySelector('#myGravatarTemplate');
    var clone = document.importNode(t.content, true);
    updateImg(clone.querySelector('img'), this.getAttribute("email") || "");

var MyGravatarElement = document.registerElement('my-gravatar', {
    prototype: MyGravatarElementPrototype



Live code on jsFiddle (use Chrome Canary with Web Platform features enabled)

More info on Custom Elements – defining new elements in HTML by Eric Bidelman.

4. HTML Imports

Imports load external resources, such as Templates or Custom Elements.

Assuming the above Custom Element definition is contained in a file my-gravatar.html, the following code will bring the avatar image on screen:

<link rel="import" href="my-gravatar.html">
<my-gravatar email="albert.einstein.starcounter@gmail.com"></my-gravatar>

Imported HTML files can contain templates, style sheets and scripts. They get executed when the import is loaded.

Further reading

These are just the fundamentals of Web Components. So far, I have only presented usage of native APIs already implemented in Google Chrome Canary. With Polymer, the same code will work in any modern browser and may be simplified with some powerful syntactic sugar. I will cover this in upcoming blog posts.

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.


Published at DZone with permission of Marcin Warpechowski, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}