<template> - unlocking web components

Wow... I mean, when I stumbled upon the <template> tag I knew it was going to be a game-changer for me. It's one of the main blocks of web components (more about them in another article) but it also simplifies adding nodes with JS: integrating them in your toolbox, even if in a so limited way, will help you speed up learning web components... but what is a <template>?

The <template> tag

A <template> lets you can create an element that contains HTML code. This container is invisible and is ignored by screen readers. You can then grab it with your JS and use it at your will, easily fill it with your dynamic content, or create multiple copies of it, or... you name it!

How to use the <template>

Before was...

Let's say you want to add a card in a section, containing other cards. Without templates you could do one of the following:

1. make an invisible card, make a copy with JS, change its content, add it as a child node of the section;

2. take an already visible card, copy it and do as before;

3. manually create the element node with JS, insert htmlContent and add it to the section

It seems a lot of effort or workarounds to me here...

... but now...

With <template>s you simply take your template (that is already hidden, for free), copy it with JS and add it to the DOM: it looks like solutions 1 and 2 (and for many ways it is), but now adding elements has its own clean and tidy streamline.

In a <template> you can also specify definite containers for definite kinds of contents (yeah, like placeholders), but more about <slots> when dealing with web components.

Just an example

For our example, we'll make a list of cards.

First, we code our template, giving it an id (or a class) to be able to select it via JS. You can code it basically wherever you want: it won't be displayed anyway.

<template id=”card__template”>
    <li class=”card”>
        <h3 class=”card__title”></h3>
        <p class=”card__text”></p>
    </li>
</template>

And, obviously, we also need a container where we'll insert our cards.

<div id=”card__container”></div>

Next, let's take our template and create a real list item from it. Select the template as usual (with querySelector or getElementById) and clone it in another variable with the following code

const container = document.getElementById('card__container');
const template = document.getElementById('card__template');
let newItem = template.content.cloneNode(true)

Be aware to add (true), which lets us make a deep clone. NewItem is now a “document fragment”: you can think of it as a “container” for your code.

Now you can add content as you wish and finally append it to its container with

container.appendChild(newItem);

Done, that's it.

Even if at a first glance it may not seem, this little <template> dude is the first, easy-to-understand key to unlocking web components skill.

---

Useful add-on

It could be a nice touch to add a message for those whose browser doesn't support this tag. In your JS you can add the following

if("content" in document.createElement("template")) { 
    // your code here 
} else { 
    // your "not supported" message logics. Here I go for a simple alert. 
    alert("Your browser doesn't support template elements, so sorry..."); 
}