Detailed explanation of the template label in HTML5

First, HTML5 template elements, can be basically determined to be 2013 only to appear.   　　Why use, as implies meaning, is used to declare is "template element". Currently, we embed template HTML in HTML, which is often written like this: xml/html code copies content to the Clipboard

1. <script type= "Text/template" >
2. // ...
3. </script>

In fact, there is no standard notation for type= "text/template",<template> elements that are designed to make HTML template HTML more standard and normative.

Previously, we might have used <textarea> or <xmp> (repealed but still available) nested, non-escaped HTML tag code to implement certain front-end functions, but the same, as in the above popular usage, is not standard. In terms of future trends, it's clear that <template> labels are kingly. However, compatibility is a problem that can not be ignored, so even if it is a lot less, the actual value is limited, so here is just a brief introduction.

Second, HTML5 template element complex surface

Look at the following four kinds of nested image HTML, while the picture content is not displayed, there is no request to be written:

xml/html Code copy content to clipboard

1. <script type= "Text/template" >
3. </script>
5. <textarea style= "Display:none;" >
7. </textarea>
9. <XMP style= "Display:none;" >
11. </xmp>
13. <template>
15. </template>

1. The content of the label is hidden

The <script> itself is specific so that internal HTML tags are processed according to strings, so the innate content does not appear. However, in Dreamweaver, this kind of writing has a big problem, that is, when scripting HTML in script, the label automatically closed is always </script> this very annoying.
<textarea> is a text field in which nested HTML fragments are treated as text field values. However, the text field itself is visible, so additional settings are required display:none;
<xmp> is a very old, very special attribute with a example semantics, an example. It is said that it was later abolished by the <pre> label, in fact, all browsers are currently supported. However, it cannot be equated with <pre> labels. <pre> there is a tag, the display is a picture, and <xmp> presents a piece of HTML code. However, as with <textarea>, the content does not show, but also need additional settings display:none;
There is no display:none on the <template> label above; Why? This is only played <template> tag elements of the original characteristics of natural display:none, while the template elements inside the content is not present. Therefore, you do not need to set the hide. This is one of the features of HTML5 <template> tag elements: Tag content concealment.

2. Label position arbitrariness
In addition to the above <template> child elements of the natural hidden outside the,<template> tag also has a feature, is the position of arbitrariness, which is very similar to <script> or <style> tags, can be

3. Invalidity of ChildNodes
Although the naked eye looks like there are many child tags inside the <template> tag, this inertia thinking is not useful here. Assuming that the variable template is a <template> tag dom (a lot of HTML code inside) that we get, you'll find that Template.childnodes is an empty fart. We can use template.innerhtml to get the complete HTML fragment. If you have to get the "pseudo child element". There is a way, OK, open your eyes, to use the content attribute.

Template.content will return a fragment of the document, which you can understand as a different file, and then use some of the query APIs under document to get the "pseudo child" element in the <template> tag. For example, to get the first picture element is:

CSS code to copy content to clipboard

1. var Image_first = template.content.querySelector ("img");

Third, HTML5 template element end surface

You can ruthlessly click here: HTML5 template Template Element experience Demo

Template elements and CSS
If the browser derelict, think <template> is a common custom element, then the display will make the following appearance, the internal label to the general label rendering.

If the browser with the times, then the display will be the following, its own CSS rendering, internal tags directly different space does not render, such as Chrome:

In other words, although from the perspective of CSS,<template> is a common element with CSS, but, from the HTML point of view, as if with the Earth's writing round eyes, can let the internal label transferred to the different space, blood line as rare.

,<template> is hidden by default and is actually the default display property of None. Use the following code to measure the knowledge:

window.getComputedStyle (template). Display; The result is "none"

As a result, the following CSS declarations are set up in the demo:

CSS code to copy content to clipboard

1. template {Display:block;}

Cloning of templates
If you are dealing with HTML strings, similar to the current popular MVC framework or template technology, then template.innerhtml is sufficient. However,<template> is more powerful than <script> is that internal content can only be,<script> as strings, while <template> exists in different spaces, but The node can still be fetched (shown above), as well as a complete clone, with syntax similar to the following:

CSS code to copy content to clipboard

1. var clone = Document.importnode (Template.content, true);

You can then load the template content with the Append node (appendchild), rather than (without selecting) the append string to load the template content. The title is "Introduction", therefore, does not unfold, also does not put the concrete example (if has the interest, may refer to the article at the end of the reference articles), everybody knows that has this kind of matter.
Iv. Summary of HTML5 template interview

So far,<template> elements of behavior, performance and some methods basically have a general understanding, if this is a job interview, then I <template> evaluation is very high, special occasions to use special tools, some similar "different space" The design is also to let the people's eyes, this element is more popular than

Near the end, put on the compatibility table, IE browser dragged a good hind legs, but I said very calm, because of IE already numb!

        compatibility