Home > Developer > Web Develop
<template>element, which is basically determined to be 2013. What do you use, as implies, is to declare "template element".
For now, we embed template HTML in HTML, often in a similar way:
<script type= "Text/template" >//...</script>
In fact, there is no type="text/template" such standard notation, and the <template> presence of elements is intended to make HTML template HTML more standard and prescriptive.
Previously, we may have used <textarea> or <xmp> (abolished but still usable) nested non-escaped HTML tag code to implement some specific front-end functionality, but, again, as in the above popular usage, are not standardized. From the future trend, obviously the <template> label is the king. However, compatibility is an issue that cannot be ignored, so even if you pull a lot less and have a limited amount of real value, here's just a brief introduction.
Look at the following four nested image HTML, while the picture content is not displayed, there will be no way to ask:
<script type= "text/template" ></script>
<textarea style= "Display:none;" ></textarea>
<XMP style= "Display:none;" ></xmp>
<template></template>
1. Label Content Concealment
<script> itself is specific, so that the internal HTML tags are processed by string, so the innate content is not displayed. However, in Dreamweaver, there is a big problem with this notation, that is, when you write template HTML in script , the label automatically closes forever as </script> this is annoying. <textarea> is a text field in which nested HTML fragments are treated as values of the text field. However, the text field itself is visible, so additional settings are required for Display:none; <xmp> is a very old and special property, with the semantics of example , an example. It is said that it was later abolished by the <pre> tag, which, in fact, is currently supported by all browsers. However, it cannot be equated with the <pre> label. <pre> has a tag that shows a picture, and <xmp> renders a piece of HTML code. However, as with <textarea> , the content does not appear, and additional settings are required display:none; <template> no settings on label Display:none; , Notice No. Why? This is just the original feature of the <template> tag element, which is inherently display:none , and the content inside the template element is not rendered. Therefore, you do not have to set hide. This is one of the HTML5 <template> tag element features: tag content concealment . 2. Label position arbitrariness
In addition to <template> the above sub-elements of natural hiding, the <template> label also has a feature, is the position of arbitrary, which is very similar <script> or <style> label, can be in , or can be in <body> or <frameset> .
3. ChildNodes Invalidity
Although, the naked eye appears to be a <template> label with a lot of sub-tags, this inertia thinking is not useful here. Assuming that the variable template is a <template> tagged dom we get (inside a whole bunch of HTML code), you'll find: template.childNodes It's a big fart. We can use to template.innerHTML get the full HTML fragment. If you have to get "pseudo child elements". There are ways, OK, wide eyes, to use content attributes.
template.contentwill return a document fragment that you can understand as another document , and then use document some of the query APIs to get the <template> "pseudo child elements" inside the tag. For example, getting the first picture element is:
var Image_first = template.content.querySelector ("img");
Third, HTML5 template element end surfaceYou can really click here: HTML5 template Element Experience Demo
Template elements and CSS
If the browser derelict, considered to be <template> a normal custom element, then the display will make the following appearance, the internal label according to the general label rendering, such as IE11:
If the browser is up to date, 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 a CSS point of view, <template> is a common element with CSS, but, from the HTML point of view, it is like with the Earth's writing wheel eye, can let the internal label transfer to the different space, blood boundary like rare.
By default, it <template> is hidden and is actually the default display property of the none . Use the following code to test the information:
window.getComputedStyle (template). display; The result is "none"
Therefore, the following CSS declarations are set in the demo:
template {display:block; ...}
Cloning of templates
If you are working on an HTML string, similar to the current popular MVC framework or template technology, it is template.innerHTML sufficient. However, <template> <script> what is more powerful is that the <script> internal content can only be obtained as a string, and <template> although it exists in a different space, it is still possible to get nodes (shown above), as well as complete clones, with syntax similar to the following:
var clone = Document.importnode (Template.content, true);
You can then use the Append node (appendchild) to load the template content instead of (not having to choose) the append string to load the template content. The title is "Introduction", therefore, do not expand, also do not put specific instances (if interested, can refer to the article at the end of the reference), we know that there is a good thing.
Iv. HTML5 Template Interview SummaryAt this point, the <template> elements of behavior, performance and some methods basically have a general understanding, if this is an interview, then my <template> evaluation is very high, special scenes use special weapon, some similar "different space" design is also let people open eyes, this element than Such HTML5 elements are more popular and more likely to be noticed.
Reference articles
- Mdn-<template>
HTML5 <template> Tag Elements Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
