在Shadow DOM使用原生模板
原生模板的优势
- 延迟了资源加载
延迟了加载和处理模板所引用的资源的时机，这样，用户就能够在模板中使用任意多的资源，却不阻碍页面的渲染。
- 延迟了渲染内容
无论模板在什么位置，浏览器不会把模板中的内容直接渲染出来。开发者可以将模板放在页面中的任意位置，然后根据具体的情形选择模板去渲染，而不必切换模板的display属性，或者担心由于解析不需要的模板内容而带来的开销。
- 从DOM中隐藏内容
模板中的内容并不能视为DOM的一部分，当我们查询DOM节点时，绝对不会返回模板的节点。这样，模板就不会拖慢DOM节点的查询速度。模板终点内容在激活之前都可以视为隐藏的。
原生模板的用法
在<template>标签中编写模板，编写好的模板可以被插入到head body frameset等标签中，或者他们的任意后代标签中。
<head>
<template id="actq">
<p class="response"></p>
<script type="text/javascript">
(function() {
var p=confirm("tip?")
var responseEl = document.querySelector('.response')
if(p){
responseEl.innerHTML = 'success'
}
else{
responseEl.innerHTML = 'fail'
}
})();
</script>
</template>
</head>
<body>
<div id="atcq-root"></div>
</body>使用模板时，将模板内容插入到DOM中即可。
首先获得对模板节点的引用
var template = document.querySelector("#atcq")然后创建Shadow DOM，之后将模板中的内容填充到根元素中
var root = document.querySelector("#atcq-root").createShadowRoot()
root.appendChild(template.content)Shadow DOM简介
shadow-dom 其实是浏览器的一种能力，它允许在浏览器渲染文档的时候向其中的 Dom 结构中插入一棵 DOM 元素子树，但是特殊的是，shadow DOM 子树并不在主 DOM树中。这颗子树形成了自己的『闭合空间』，比如shadow DOM子树可以包含与父文档中重复的ID和样式，而不会相冲突。
参考
相关推荐
zuncle 2020-09-28
星星有所不知 2020-10-12
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children
Lophole 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14