Detailed explanation of the <template> tag in HTML5_html5 tutorial skills-H5 Tutorial-php.cn

1. First look at HTML5 template elements

The element is basically certain to have only appeared in 2013. What is it used for? As the name implies, it is used to declare that it is a "template element".

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

XML/HTML Code Copy content to clipboard script type = "text/template" > // ... script > In fact, there is no standard way of writing type="text/template". The appearance of the element is intended to make HTML template HTML more standard and standardized.

In the past, we may have used or (obsolete but still available) to nest unescaped HTML tag codes to achieve some specific front-end functions, but, again, the same as above Popular usage is the same, both are irregular. In terms of future trends, it is obvious that the tag is the way to go. However, compatibility is an issue that cannot be ignored. Therefore, even if there is a lot of talk, the actual value is limited, so here is just a brief introduction. 2. HTML5 template element duplication

Look at the following four nested image HTMLs. At the same time, the image content is not displayed and there is no request:

XML/HTML Code Copy content to clipboard script type = "text/template" > img src = "mm1.jpg" > script > textarea style = "display: none;" > img src = "mm1.jpg" > textarea > xmp style = "display: none;" > img src = "mm1.jpg" > xmp > template > img src = "mm1.jpg" > template > 1. Hiddenness of tag content

The specificity of allows internal HTML tags to be processed as strings, so the generated content is not displayed. However, in DreamWeaver, this writing method has a big problem, that is, when writing template HTML in script, the tag automatically closed is always , which is very annoying. is a text area, and the HTML fragment nested inside will be used as the value of the text area. However, the text field itself is visible, so additional settings are required. display: none; is a very old and special attribute with the semantics of example. It is said that it was later replaced and abolished by the tag. In fact, currently, all browsers support it. However, it cannot be equated with the tag. There is an tag inside , which displays an image, while displays a piece of HTML code. However, like , if the content is not displayed, additional settings display: none; are required. Display: none; is not set on the tag above. Did you notice? Why? This just takes advantage of the original characteristics of the tag element, which is born with display:none. At the same time, the internal content of the template element will not be displayed. Therefore, there is no need to set up hiding. This is one of the characteristics of the HTML5 tag element: tag content hiding.

2. Tag position arbitrariness In addition to the natural hiding of the sub-elements above, the tag also has another feature, which is arbitrariness in position, which is very similar to or tag can be in , or in or .

3. Invalidity of childNodes Although it seems to the naked eye that there are many sub-tags in the tag, this kind of inertial thinking is not applicable here. Assuming that the variable template is a tag DOM we obtained (a lot of HTML code in it), you will find that template.childNodes is empty. We can use template.innerHTML to get the complete HTML fragment. If you have to get "pseudo child elements". There is a way, OK, keep your eyes open and use the content attribute.

template.content will return a document fragment, which you can understand as another document. Then, you can use some query APIs under the document to obtain the "pseudo sub-elements" in the tag. For example, to obtain the first image element is:

CSS Code Copy content to clipboard var image_first = template. content .querySelector( "img" ); 3. HTML5 template element final page

You can click here: HTML5 template element experience demo

Template elements and CSS If the browser is blind and thinks that is an ordinary custom element, the display will look like the following, the internal Tags are rendered as normal tags.

If the browser keeps pace with the times, the display will be as follows, with its own CSS rendering, and the internal tags will be directly rendered in different spaces, such as Chrome:

In other words, although from the perspective of CSS, is an ordinary element that competes with CSS, but from the perspective of HTML, it is like Obito's Sharingan, which allows internal tags to be transferred In a different space, bloodstains are as rare as the limit.

By default, is hidden, and its display attribute is actually none by default. Use the following code to test and you will know:

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

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

CSS Code Copy content to clipboard template { display : block ; ... } Clone of template If you are dealing with HTML strings, similar to the now popular MVC framework or template technology, template.innerHTML is sufficient. Of course, is more powerful than in that the internal content of can only be obtained as a string, and although exists in a different space, it can still be obtained by nodes (the above display), and a complete clone, the syntax is similar to the following:

CSS Code Copy content to clipboard var clone = document.importNode(template. content , true); Then, you can use append node (appendChild) to load template content instead of (no choice) append string to load template content. The title is "Introduction", so I won't expand on it and won't include specific examples (if you are interested, you can refer to the reference article at the end of the article). It's good that everyone knows that such a thing exists. 4. HTML5 template interview summary

At this point, I basically have a general understanding of the behavior, performance and some methods of the element. If this is an interview, my evaluation of is quite high. It is used in special scenarios. Special tools, some designs similar to "different space" are also eye-opening. This element is more popular, more concerned and has more potential than HTML5 elements such as .

Towards the end, I put up the compatibility table. IE browser was a big hindrance, but I was very calm because I was already numb to IE!

Compatibility