Details about the & lt; template & gt; tag and html5template in HTML5

Details about the <template> tag and html5template in HTML5
This article mainly introduces Tags are important to HTML5 beginners. For more information, see

I. Starting surface of HTML5 template Elements

<Template> element. It can be confirmed that it only appeared in 2013. Why is it used? It is used to declare a "template element ".

Currently, we embed the template HTML in HTML, which is usually written like this:

Copy XML/HTML Code to clipboard

1. <Script type = "text/template">
2. //...
3. </Script>

In fact, there are no standard expressions such as type = "text/template". The emergence of <template> elements aims to make HTML templates more standard and standard.

Previously, we may have used <textarea> or <xmp> (abolished but still available) nested non-escape HTML Tag code to implement some specific front-end functions. However, the same, as with the popular usage above, they are not standard. From the perspective of future trends, it is clear that the <template> tag is king. However, compatibility is a problem that cannot be ignored. Therefore, even if a lot is involved, the actual value is limited. Therefore, here is a brief introduction.
Ii. HTML5 template Elements

Let's take a look at the following four types of nested image HTML. At the same time, the image content is not displayed and there is no request Syntax:

Copy XML/HTML Code 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. Hidden TAG content

<Script> because it is specific, internal HTML tags are processed according to strings. Therefore, the inherent content is not displayed. However, in DreamWeaver, there is a big problem with this writing method, that is, when the template HTML is written in the script, the tag automatically closed is always annoying. </script>.
<Textarea> is a text field. The Nested HTML segment in it is treated as the value of the text field. However, the text field itself is visible, so you need to set additional display: none;
<Xmp> is a very old and special attribute. The syntax is example, for example. It is said that it was later replaced by the <pre> label and abolished. In fact, all browsers currently support it. However, the label and the <pre> label cannot be equal. <Pre> There Is A label, and an image is displayed, while <xmp> shows a piece of HTML code. However, like <textarea>, if the content is not displayed, you need to set display: none;
No display: none; is set on the <template> label above. Why? This only gives full play to the original features of the <template> label element. It is born with display: none, and the content inside the template element is not rendered. Therefore, you do not need to hide it. This is one of the features of HTML5 <template> tag elements: hidden TAG content.

2. Random tag location
In addition to the preceding <template> sub-elements, the <template> tag has an arbitrary location, which is similar to the <script> or <style> tag, it can be in

3. Invalid childNodes
Although it seems to the naked eye that there are many sub-tags in the <template> tag, this kind of inertial thinking is not useful here. Assuming that the variable template is a <template> tag DOM (a lot of HTML code in it), you will find that template. childNodes is an empty big fart. We can use template. innerHTML to obtain the complete HTML clip. If you have to obtain the "pseudo sub-element ". There is also a way, OK, open your eyes, use the content attribute.

Template. content will return a document segment, which can be understood as another document. Then, you can use some query apis under the document to obtain the "pseudo sub-element" in the <template> tag. For example, if the element of the first image is:

Copy the content to the clipboard using CSS Code.

1. Var image_first = template. content. querySelector ("img ");

Iii. Final surface of HTML5 template Elements

Click here: HTML5 template element to experience the demo

Template elements and CSS
If the browser does not know Taishan, and thinks that <template> is a common custom element, the display will make the following look, and the internal labels are rendered according to the general labels.

If the browser keeps up with the times, the display will be like the following: Self-CSS rendering, internal labels direct cross-space rendering, such as Chrome:

That is to say, from the perspective of CSS, <template> is a common element that is very popular with CSS. However, from the perspective of HTML, it is like a pivoting eye, this allows internal labels to be transferred to different spaces, and the blood stains are rare.

By default, <template> is hidden, but its display attribute is none by default. Use the following code for a test:

Window. getComputedStyle (template). display; // The result is "none"

Therefore, the following CSS declaration is set in the demo:

Copy the content to the clipboard using CSS Code.

1. Template {display: block ;...}

Template clone
If you are processing HTML strings, similar to the popular MVC framework or template technology, template. innerHTML is sufficient. However, <template> is more powerful than <script> in that <script> internal content can only be obtained as strings, while <template> exists in different spaces, you can still get the node (shown above) and complete clone. The syntax is similar to the following:

Copy the content to the clipboard using CSS Code.

1. Var clone = document. importNode (template. content, true );

Then, you can load the template content by using the append node (appendChild) instead of loading the template content by using the append string. The title is "Introduction". Therefore, do not expand or release specific instances. (If you are interested, refer to the reference articles at the end of this Article.
Iv. HTML5 template interview Summary

At this point, the behavior, performance, and some methods of the <template> element have a general understanding. If this is an interview, I would like to comment on the <template>, some designs similar to "Different Spaces" are also eye-catching for special scenarios. This element is more popular and more promising than HTML5 elements such as

Close to the end, put the compatibility table, IE browser dragged a lot of effort, but I said it was very calm, because IE has been numb!

Compatibility