HTML templates

Live coding video: HTML templates

Hi! In this lesson, I am going to talk about the template API.

You must know that Web components are what we call ‘an umbrella API’ that is built on four W3C specifications.

One is the template specification about how to make HTML code that will be duplicated each time you will need to create a new widget.

It is a sort of ’inert code’: if it includes videos they will not be played; if it includes JavaScript, it will not be executed, until you clone this template and add it to your document.

The other APIs we will present in the course are the shadow DOM specification that will make encapsulations.

In other words, it will hide the JavaScript, the HTML and the CSS from your widget to the external world.

If you do ’view source’ in a page, you will not see anything.

And if you use CSS in your document, it will not cross the boundaries of the different Web components.

The two last APIs are much more simpler.

One is for designing custom elements like the x-gif Web component element we saw in the previous lesson.

You will add new custom elements and the browser will render them.

The last one enables the browser to import in an HTML document another HTML document.

Here is a small example that defines a template.

So you define a template using a template element, and usually you give it an id because you will use this id from JavaScript in order to clone its content and to add it to the document.

So, this code is not rendered: it is just a skeleton.

And this skeleton, we are going to work with it from JavaScript! In order to clone a template and make it live, we need first to select it: document.querySelector('#mytemplate') (we select the template with the given id), then we can complete its content.

I told you this is a skeleton: in that case it is an image with a caption, and the src attribute of the image is kept empty in the skeleton.

We can set it from the template object we got in JavaScript.

The ’t.content’ property corresponds to the DOM of the template.

So we can use querySelector to select an image in the template and set its src to the HTML5 logo (URL).

Once we completed the content of the template, we can clone it using ‘document.importNode’.

The last parameter ‘true’ means deep cloning.

We can have templates that includes templates, and so on.

And then once you cloned the content of the template, you add it to the document: ‘document.body.appendChild’, with the cloned template, will do that.

Let's try it, I put a button in the document that calls the instantiate function from JavaScript, that does all the different steps I detailed just earlier.

If I click on the button, it will add all the HTML code from the template, and I can do that as many times as I want.

This instantiation process is how we create a new skeleton for our future Web components.

I hope you liked this video.

Bye! Bye!

HTML templates are an important building-block of Web components. When you use a custom element like <x-gif....>, the browser will (before rendering the document) clone and add some HTML/CSS/JS code to your document, thanks to the HTML template API that is used behind the scenes.

HTML templates define fragments of code (HTML, JavaScript and CSS styles) that can be reused.

These parts of code are inert (i.e., CSS will not be applied, JavaScript will not be executed, images will not be loaded, videos will not be played, etc.) until the template is used.

Here is an example of code that defines a template:

</template>

Note that it's ok to have the src attribute empty here, we will initialize it when the template is activated.

To use a template, clone its content!

A template has "content" (the lines of code between <template> and </template>), and to manipulate it we use the DOM API and the content attribute of the DOM node that corresponds to a given template (line 3 of the source code example below).

In order to use a template's content, we clone it using the document.importNode(templateContent, true) method, where the node is the template's content and true means "deep copy" the content.

A template is typically used like this:

var t = document.querySelector('#mytemplate');

// Populate the src at runtime.

t.content.querySelector('img').src = 'https://webcomponents.github.io/img/logo.svg';

// Clone the template, sort of "instantiation"!

var clone = document.importNode(t.content, true);

document.body.appendChild(clone);

Explanations:

In this example, line 1 assigns the DOM node corresponding to the template we defined to variable t.
t.content (line 3) is the root of the subtree in the template (in other words, the lines of HTML code inside the template element)
Note that we set the value of the src attribute of the image inside the template at line 3, using a CSS selector on the template's content.
Lines 5 and 6 clone the template's content and add it to the <body> of the document.

Example

Here is an online example at JSBin that uses exactly the code presented:

And here is the complete source code...

The HTML part:

<div class="comment">hello</div>

</template>

<body>

<button onclick="instantiate()">Instantiate the template</button><br>

</body>

The JavaScript part:

function instantiate() {

var t = document.querySelector('#mytemplate');

// Populate the src at runtime.

t.content.querySelector('img').src =

'https://webcomponents.github.io/img/logo.svg';

var clone = document.importNode(t.content, true);

document.body.appendChild(clone);

}

Page updated

Google Sites

Report abuse