在Shadow DOM运用原生模板

2024年5月31日 154次阅读 来源: Jeffrey

原生模板的上风

  • 延迟了资本加载

延迟了加载和处置惩罚模板所援用的资本的机遇，如许，用户就能够在模板中运用恣意多的资本，却不障碍页面的衬着。

  • 延迟了衬着内容

不管模板在什么位置，浏览器不会把模板中的内容直接衬着出来。开发者能够将模板放在页面中的恣意位置，然后依据详细的情况挑选模板去衬着，而没必要切换模板的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和款式，而不会相冲突。

参考

Shadow DOM v1：自力的收集组件
影子DOM

    原文作者：Jeffrey
    原文地址: https://segmentfault.com/a/1190000013590797
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞