Understanding Web Components
By: Blog Moove-It
Tags: HTML, Web Components, JavaScript, CSS

Quoting Eric Bidelman, an engineer at Google especially involved in this technology:

“Web components are a set of emerging standards that allow developers to expand HTML and its functionality”

And these standards are:

Templates

Custom Elements

Shadow DOM

Imports

I will try to give you a general sense of what these are.

Templates — Reusing HTML

Templates shouldn’t be a new concept to any developer out there. A lot of languages, libraries and frameworks use some kind of template engine. Let’s see how to use them:

<template>

<h1>Hi there!</h1>

</template>

Here we are defining a new tag, called template and we could put any html markup we want inside it.

But, what’s the new thing here? It’s just a tag…

It is…but the content inside the template will not be rendered in the page until we explicitly activate it. Even better, no external content like images or videos will be loaded, nor javascript code inside a script tag will be executed.

How do we activate a template?

// select the template

var template = document.querySelector('#mytemplate'); // import a copy of the template’s content

var clone = document.importNode(template.content, true); // append the content to the body

document.body.appendChild(clone); Custom Elements - Creating tags HTML provides us with a set of tags that we use to define the structure of our web. After using them you will realize that there are not too many and most of the time they don’t describe what you are building. This is how it looks if we inspect the markup of a site like Twitter: [caption id="attachment_1382" align="alignnone" width="612"]

Twitter markup.[/caption] It's simply too hard to know what is going on, it lacks expressivity. Here is where custom elements fit well. We can create our own tags that the browser will treat as normal tags. And we can name it! It only requires to have a dash (-) in its name, to distinguish from the default tags. Also we can define our own public API with custom attributes. Let's define our tag and register it in the DOM: <moove-it>

<template id="phrase">

Software for Human needs.

</template>

</moove-it>

<script>

//register our element

var mooveIt = document.registerElement('moove-it');

</script> We can see in Chrome DevTools:

We are able to see the text "Software for human needs" but it's not displayed in the browser. This is because we put it inside a template and like we said it will not be rendered until we activate it. <moove-it>

<template id="phrase">

Software for Human needs.

</template>

</moove-it> <script>

//register our element

var mooveIt = document.registerElement('moove-it');



//get and clone the template

var mooveItTemplate = document.querySelector('#phrase');

var clone = document.importNode(mooveItTemplate.content, true); // append the content of the template to our

document.body.appendChild(clone);

</script>

And there it is! Our first custom element, using templates. Shadow DOM - Encapsulation If you want to build a small widget within your page you will face one big problem: encapsulation. The DOM tree lacks of it. Your special widget may have CSS classes, ids and javascript code that use this to implement some behavior. You have to pay special attention to this, since it could accidentally apply to other parts of the page. So Shadow DOM is the component we will use to separate the content, and it's functionality, from the presentation of our element. To enable it in DevTools (Chrome 35+), just right click in Chrome, go to inspect element, and in the settings you can activate ‘Show user agent Shadow DOM‘ Now you will be able to see a node called "#shadow-root" inside our moove-it tag, and inside of it the content of the element. This separation will enable us, among other things, to style our element without affecting the rest of the page. Let's see an example of how to use this feature. We will create our own custom tag, using templates and encapsulate its style and content, using Shadow DOM. <body>

<p>Moove-it </p>



<moove-it name="moove-it" constructor="MooveIt">

</moove-it> <template id="phrase" >

<style>

p {

background: orange;

color: white;

}

</style> <p>Software for human needs.</p>

</template> <script >

// register our custom element

var mooveIt = document.registerElement('moove-it'); // append to the body

document.body.appendChild(new mooveIt()); //select element

var mooveItElement = document.querySelector('moove-it'); //select template

var template = document.querySelector('#phrase'); // create shadow root and fill with the content of the template

mooveItElement.createShadowRoot().appendChild(template.content);

</script> </body> [caption id="attachment_1385" align="alignnone" width="581"]

DevTools[/caption] [caption id="attachment_1384" align="alignnone" width="581"]