foreword
In the previous code for creating Custom Elements, there is one more cumbersome place: each child element in the Shadow DOM is created by the document.createElement method. Like the following:
So is there any way to simplify this step? The answer is yes, that is the protagonist we are going to introduce today - Template.
Concept of Templates
The original quote from MDN is:
HTML Content Template (
<template>) element is a mechanism for holding client-side content that is not rendered when the page is loaded, but can then (sic may be) be instantiated at runtime using JavaScript.Think of a template as a piece of content that can be stored in a document for later use. While the parser does process the content of the
<template>elements when the page is loaded, this is done only to ensure that these are valid; the element content is not rendered.
Through this concept explanation, we can know the following points about Templates:
- It is a set of element tags used in HTML pages, namely
<template></template>; - It is processed during HTML page parsing, but not rendered on the page;
- It can be accessed by JavaScript.
Templates came out earlier than Web Components.
Properties of Templates
In addition to global attributes (that is, attributes common to all HTML elements), Templates has only one private attribute: content, which is read-only and returns the document fragment object and its DOM structure inside Templates.
Control the template in the console, and the result is as follows:
We can use templateEle.content as a normal document object.
Simple to use Templates
HTML + Templates only
<body>
<h1>使用 Templates</h1>
<template>
<div>
这是 template 标签内的子节点内容
</div>
</template>
</body>The page display effect is as follows:
In line with the above two points: parsed, not rendered.
use JS
If we want to load the node content in Templates to the current page for display, we can use the following JS code to achieve:
// 获取 template 元素
const templateEle = document.querySelector("template");
// 获取 template 元素包含的文档片段
const content = templateEle.content;
// content 可以当做正常的 document 来使用
const node = content.querySelector("div");
// 追加节点到当前文档
document.body.appendChild(node);The final effect is as follows:
However, there is a flaw in this operation. Since the div inside the Templates code snippet is appended to the current document structure, the div node inside the Templates disappears.
In order to avoid modifying the DOM structure inside the content template, we can clone the element node inside the template first, and then trace the cloned node to the current document:
// 获取 template 元素
const templateEle = document.querySelector("template");
// 获取 template 元素包含的文档片段
const content = templateEle.content;
// content 可以当做正常的 document 来使用
const node = content.querySelector("div");
// 导入 node 到 当前文档
// 必须要有这一步
const cloneNode = document.importNode(node, true);
// 也可以使用 cloneNode
// const cloneNode = node.cloneNode(true);
// 追加节点到当前文档
document.body.appendChild(cloneNode);Compatibility of Templates
concluding remarks
Templates can encapsulate some page content in advance and save it on the HTML page without rendering, and then you can use JS to operate Templates.
The above are the relevant knowledge points of Templates.
~
~ This article is over, thanks for reading!
~
Learn interesting knowledge, meet interesting friends, and shape interesting souls!
Hello everyone, I'm King , the author of 〖 Programming Samadhi 〗, my official account is " Programming Samadhi ", welcome to pay attention, I hope you will give more advice!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。