持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
- Template元素内的元素可以不在DOM中进行呈现，但可以使JavaScript对其进行引用，从而达到对HTML重复结构复用的目的
<template>
<div>
<p>
文档内容不会被显示
</p>
</div>
</template>
-
<template>不仅可以放置一些常见的HTML标签，甚至也可以将<script>和<style>放入template中- 放入template内的脚本和样式不会被执行，因为他们属于一个DocumentFragment而并不在文档结构中
- 当template内的元素插入文档时，样式和脚本会生效
<template>
<style>
div {
width: 100px;
height: 100px;
}
</style>
<script>
alert("template被插入文档")
</script>
</template>
- template标签内的内容被认为是“超出文档范围”的内容，不会对文档产生任何影响
- 我们可以使用
HTMLTemplateElement.content对Template内的内容进行访问，一般我们使用HTMLTemplateElement.content.cloneNode(true)克隆其节点在新组件中复用。 - template的内容是交互式的，在其插入文档后，脚本便会自动运行，如
<video autoplay>在插入文档后会自动播放。 - template元素不具有任何迭代机制，数据绑定或者变量替换功能。
Web Components中使用template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<template id="templateTest">
<div>
这是Template模板内容
</div>
</template>
<shadow-test></shadow-test>
</body>
<script>
customElements.define('shadow-test', class extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({mode: 'open'});
const template = document.getElementById("templateTest")
shadow.append(template.content.cloneNode(true))
}
});
</script>
</html>
- 要注意的关键是我们使用
Node.cloneNode()方法添加了模板的拷贝到阴影的根结点上。如果直接将Template内的节点添加到其他节点上，该操作属于是DOM元素的移动，而非对DOM的复用，template内的元素会被转移。 - 我们亦可以添加一些style元素在template内，就像是对该模板内样式的封装，这些样式信息稍后会封装到自定义的元素中。如果只给它添加到一个标准的DOM中是不起作用的。
