EIJI KITAMURA: Web components enable
you to build a great website through the use
of reusable components.
But what does it take to build a web component?
My name is Eiji, and today I'm going
to give you an overview of template element.
The idea of templating isn't a new thing.
Starting from server side, templating
has been a widely used technique for assigning variables,
conditional behaviors, and repeated contents inside HTML.
On the browser side, similar attempts
have been made by various libraries using JavaScript,
such a Handlebars.js, Underscore.js, AngularJS,
to name a few.
They all work well, but approaches
taken by those libraries may have pitfalls.
In this example, the template is actually
a div tag, which is hidden with a bit of CSS.
A downside of this approach is that the browser
will fetch resources like this image element
from inside the template, even if those resources haven't
been used yet.
It's a waste of resources and performance.
Another technique involves storing the template content
inside of a script tag.
The downside of this approach is because this template
will be converted into DOM elements using inner HTML.
It could introduce a cross site scripting vulnerability
if an adequate [INAUDIBLE] check is not performed.
The template element will solve those programs.
The template allows you to declare fragments of markup
which are parsed as HTML but go unused at runtime,
and can be instantiated later when you need them.
A template element won't render its contents by itself,
won't fetch any required resources, including scripts,
styles, or images, and also won't excuse scripts inside
of itself.
Currently the template element is
supported in Chrome, Firefox, and Opera.
Safari is expected to support it in version 8,
but you guys know that things change weekly,
so check in on chromestatus.com.
To detect availability of the template tag,
check if HTML template element is
available on the window object.
For unsupported browsers, you can use platform.js,
a collection of web components polyfills
made available as part of the polyfill library.
This will automatically detect availability
of the template element, and populate if necessary.
It is really simple to add your own template to HTML.
Just wrap your template markup with template tag.
This will make your markup inert,
so if will no longer render on the page
until you stamp it out.
To stamp out a template, you need
to write a bit of JavaScript.
By using document.importNode, you
can create a clone of the template content.
Note that setting the second argument as true
makes it a deep copy.
Once you've created the copy, you
can just append it wherever you want.
One thing you should note before moving forward
is that the template itself is simply a container for markup.
You might expect to have things like placeholders, repeaters,
or conditionals, but they are not
a part of template element standard.
If you want to use those advanced features,
I recommend you to use web components frameworks,
such as Polymer or X-Tag.
So this is a template element.
To learn more about template elements in detail,
make sure to read the HTML5 Rocks
article, written by Eric Bidelman.
Thank you for watching.
See you in the next episode.