在Shadow DOM使用原生模板

时间 2019-12-13

标签 shadow dom 使用原生模板栏目 HTML 繁體版

原文原文链接

原生模板的优点

延迟了资源加载

延迟了加载和处理模板所引用的资源的时机，这样，用户就可以在模板中使用任意多的资源，却不阻碍页面的渲染。javascript

延迟了渲染内容

不管模板在什么位置，浏览器不会把模板中的内容直接渲染出来。开发者能够将模板放在页面中的任意位置，而后根据具体的情形选择模板去渲染，而没必要切换模板的display属性，或者担忧因为解析不须要的模板内容而带来的开销。java

从DOM中隐藏内容

模板中的内容并不能视为DOM的一部分，当咱们查询DOM节点时，绝对不会返回模板的节点。这样，模板就不会拖慢DOM节点的查询速度。模板终点内容在激活以前均可以视为隐藏的。web

原生模板的用法

在<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，以后将模板中的内容填充到根元素中app

var root = document.querySelector("#atcq-root").createShadowRoot()
root.appendChild(template.content)

Shadow DOM简介

shadow-dom 实际上是浏览器的一种能力，它容许在浏览器渲染文档的时候向其中的 Dom 结构中插入一棵 DOM 元素子树，可是特殊的是，shadow DOM 子树并不在主 DOM树中。这颗子树造成了本身的『闭合空间』，好比shadow DOM子树能够包含与父文档中重复的ID和样式，而不会相冲突。dom

参考

Shadow DOM v1：独立的网络组件
 影子DOMgoogle