Difference between "template" tags, "content" tags and custom element tags in HTML

Question

I am beginning to learn about web components and polymer. I understand that there are mechanisms to separate content from presentation which is important in dynamically presenting content. I also understand that the "content" tag helps do so by selecting what contents (say, those within certain HTML tags or ids or classes, etc.) needs to be presented. But, I feel that the use of template tag is also in separating content from presentation and so is the use of custom element tags while the presentation/rendering is completely taken care of by JavaScript.

But we have 3 different types of tags all doing the same thing: defining content in a more structured way for ease of presentation. Could we combine some of their mechanisms into fewer tags?

It would be great if an explanation could be given, of the roles of template tags, content tags and custom-element tags, in relation to the programming idioms and design patterns followed in Web Engineering.

Answer 1

Custom Elements, <template> and <content> elements are complementary. They can be used together or separatly.

In order to define the UI of your custom-element tag:

1. at creation time, define a Shadow DOM,
2. apply the inner HTML of a template tag,
3. use content tags inside the template in order to fetch data values from the raw DOM.

Example

When you (click on the button to) register the custom-hello element, your browser will instantiate the element inside the div by calling its createdCallback method.

Inside createdCallback, the HTML template is added to the Shadow DOM root.

This Shadow DOM masks the original DOM but can display useful values (here: the #prefix and #name elements) via content tags.

register.onclick = function () 
{  
  var proto = Object.create( HTMLElement.prototype )
  proto.createdCallback = function () 
  {
    var root = this.createShadowRoot()
    root.innerHTML = document.querySelector( "template" ).innerHTML
  }
  document.registerElement( "custom-hello", { prototype: proto } )
}

<template>
  <h3>
    Hello, <content select='#prefix'></content> <content select='#name'></content>!
  </h3>
</template>

<button id='register'>Register custom-hello</button>

<div>
  custom-hello:
  <custom-hello>
    <span id="prefix">Miss</span>
    <span id="name">Kat</span>
    <span id="age">30</span>
  </custom-hello>
</div>

Answer 2

The three tag types are very different, and should not be combined.

Template Tags

A template tag is just what it sounds like, it defines a template. These tags are recognized by the browser as such, and therefore are not rendered or processed. That behavior is extremely important to how templates work, as they may contain scripts, CSS, and HTML, and none of those things can or should be executed until the template is "stamped" onto the page.

Content Tags

A content tag is an insertion point in a template. If you were to think of an HTML template as a handlebars.js template, you could consider the content tags to be akin to the handlebars themselves ({{mycontent}}). They define how the template and data will "merge" once stamped.

Custom-Element Tags

A custom element tag is impossible to merge with the above because their behavior is almost entirely undefined. They are a blank slate for you as the developer to define. You could create a custom-element tag which displays a modal, or has no layout but includes an API for a more complex behavior.