Introduction to Web Components

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!
</template>

<script>
var tpl = document.querySelector('#tpl');
tpl.content.querySelector('.name').textContent = "World";
var clone = document.importNode(tpl.content, true);
document.body.appendChild(clone);
</script>

Produces:

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>

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

Produces:

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">
    <img>
</template>
<my-gravatar email="albert.einstein.starcounter@gmail.com"></my-gravatar>

<script>
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") || "");
    this.createShadowRoot().appendChild(clone);
};

var MyGravatarElement = document.registerElement('my-gravatar', {
    prototype: MyGravatarElementPrototype
});
</script>

Produces:

Albert

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.

Want to get started with Starcounter?

Download Starcounter and start building your own applications such as web applications, mobile services, games and advertising, etc. On our developer’s site you can find tutorials and ask your own questions to our support team.

DOWNLOAD STARCOUNTER

 

 

By | 2017-03-30T12:10:42+00:00 March 24th, 2014|Web|0 Comments

By continuing to use the site, you agree to the use of cookies. More information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close