Developing Web Components

Chapter 10. Utilizing Templates

Jason Strimpel

As you read the title of this chapter you might have thought to yourself, “But we already have client-side templates for rendering markup!” Here’s an example:

<script id="some-template" type="text/x-handlebars-template">
    <p class="description">{{description}}</p>
</script>

<div id="some-template" style="display: none;">
    <p class="description">{{description}}</p>
</div>

function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var buffer = "", stack1, helper, functionType="function",
  escapeExpression=this.escapeExpression;


  buffer += "<div id=\"some-template\" style=\"display: none;\">";
  buffer += "<p class=\"description\">";
  if (helper = helpers.description) {
  stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.description);
  stack1 = typeof helper === functionType ?
  helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
    + "</p></div>";
  return buffer;
  }

While these approaches allow you to utilize templates on the client, they have their drawbacks. This is because they are really just workarounds designed to implement a missing feature: native templates in the browser. The good news is that this feature is no longer missing. It is now a W3C specification and is running in some of the latest browser versions. This new specification will allow you to begin writing ...