在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