Web Components – HTML Templates

html templates web components
Wed Aug 06 2014

Introduction

Web Components are a new standard by W3C. You can check out its status over here => http://www.w3.org/standards/techs/components#w3c_all

It is a combination of technologies that offer us rich tools to create truly encapsulated, reusable and redistributable packages on the web.

webcomponents

Its core features are

  • – HTML Templates
    – Custom Elements
    – Shadow DOM
    – HTML Imports

In this post we’ll checkout HTML Templates and in the following posts we’ll preview the other standards as well so we can paint the whole picture.

HTML Templates before the template tag

Let us try to tackle first of all the HTML Template feature. This was created to offer us the ability to specify a html snippet that can be re-used on various parts of our page. Until today we had two ways to offer template-like features to our webpages.

1. Hidden DOM

A way to create a re-usable dom snippet is to add a div in our page and make it hidden. Then we could grab that div whenever needed copy it and add it in the dom tree. For example

http://bstavroulakis.com/demos/webcomponents/templates/demo1.html

<!DOCTYPE HTML>
<html>
<head>
   <style>
.block img, .block-image{
   float:left;
}
.clear{
   clear:both;
}
</style>
</head>
<body>

<div id="template" style="display:none;">
   <li class="block">
      <img style="width:16px" src="" />
      <div class="block-name"></div>
      <div class="clear"></div>
      <div class="block-description"></div>
   </li>
</div>

<ul id="list"></ul>

<script>

var names = ['Bill','John'];

for(var key in names){
   var name = names[key];
   var tmpl = document.getElementById("template").cloneNode(true);
   tmpl.querySelector("img").src = "img.png";
   tmpl.querySelector(".block-name").innerHTML = name ;
   tmpl.querySelector(".block-description").innerHTML = "Hi I'm " + name;
   document.querySelector('#list').innerHTML += tmpl.innerHTML;
}

</script>

</body>

</html>

 

Advantages Disadvantages
Simplicity – Loads any resource that is located in the template (like images, script e.t.c) when the page loads and not when needed.
– Not standard
– The template is located in the document’s DOM tree, so it is not decoupled

 2. Script Tag

An interesting technique introduced was the use of the script tag to load templates. This technique is used by various libraries such as knockout => http://knockoutjs.com/documentation/template-binding.html

You can see an example below

http://bstavroulakis.com/demos/webcomponents/templates/demo2.html

<!DOCTYPE HTML>
<html>
<head>
   <style>
.block img, .block-image{
   float:left;
}
.clear{
   clear:both;
}
</style>
</head>
<body>

<script id="template" type="text/html">
  <li class="block">
      <img style="width:16px" src="" />
      <div class="block-name"></div>
      <div class="clear"></div>
      <div class="block-description"></div>
   </li>
</script>

<ul id="list"></ul>

<script>

var names = ['Bill','John'];

for(var key in names){
   var name = names[key];
   var tmpl = document.getElementById("template").cloneNode(true).innerHTML;
   var tmplDOM = document.createElement('div');
   tmplDOM.innerHTML = tmpl;

   tmplDOM.querySelector("img").src = "img.png";
   tmplDOM.querySelector(".block-name").innerHTML = name ;
   tmplDOM.querySelector(".block-description").innerHTML = "Hi I'm " + name;
   document.querySelector('#list').innerHTML += tmplDOM.innerHTML;
}

</script>

</body>

</html>
Advantages Disadvantages
– No resource is rendered
– It isn’t parsed by the browser
– When parsing data with script tags we may be exposed to XSS vulnerabilities

 

HTML Template

W3C now offers the template tag that is specifically created to solve the template problem. => http://www.w3.org/TR/html-templates/

http://bstavroulakis.com/demos/webcomponents/templates/demo3.html

<!DOCTYPE HTML>
<html>
<head>
   <style>
.block img, .block-image{
   float:left;
}
.clear{
   clear:both;
}
</style>
</head>
<body>

<template id="template">
  <li class="block">
      <img style="width:16px" src="" />
      <div class="block-name"></div>
      <div class="clear"></div>
      <div class="block-description"></div>
   </li>
</template>

<ul id="list"></ul>

<script>

var names = ['Bill','John'];

for(var key in names){
   var name = names[key];
   var tmpl = document.getElementById("template").content.cloneNode(true);
   tmpl.querySelector("img").src = "img.png";
   tmpl.querySelector(".block-name").innerHTML = name ;
   tmpl.querySelector(".block-description").innerHTML = "Hi I'm " + name;
   document.querySelector('#list').appendChild(tmpl);
}

</script>

</body>

</html>

 

Advantages Disadvantages
– No resource is rendered
– It isn’t parsed by the browser
– Standard
– Not compatible with IE (yet) => http://caniuse.com/#search=template

 

Conclusion

This is the end of the first piece of the Web Component’s puzzle. We’ll continue in the future with posts on Custom Elements, Shadow DOM, HTML5 Imports to fully unveil the full potential of Web Components.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!