摘要:從中隱藏內容模板中的內容并不能視為的一部分,當我們查詢節點時,絕對不會返回模板的節點。使用模板時,將模板內容插入到中即可。這顆子樹形成了自己的閉合空間,比如子樹可以包含與父文檔中重復的和樣式,而不會相沖突。
原生模板的優勢
延遲了資源加載
延遲了加載和處理模板所引用的資源的時機,這樣,用戶就能夠在模板中使用任意多的資源,卻不阻礙頁面的渲染。
延遲了渲染內容
無論模板在什么位置,瀏覽器不會把模板中的內容直接渲染出來。開發者可以將模板放在頁面中的任意位置,然后根據具體的情形選擇模板去渲染,而不必切換模板的display屬性,或者擔心由于解析不需要的模板內容而帶來的開銷。
從DOM中隱藏內容
模板中的內容并不能視為DOM的一部分,當我們查詢DOM節點時,絕對不會返回模板的節點。這樣,模板就不會拖慢DOM節點的查詢速度。模板終點內容在激活之前都可以視為隱藏的。
原生模板的用法在標簽中編寫模板,編寫好的模板可以被插入到head body frameset等標簽中,或者他們的任意后代標簽中。
使用模板時,將模板內容插入到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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51956.html
摘要:從中隱藏內容模板中的內容并不能視為的一部分,當我們查詢節點時,絕對不會返回模板的節點。使用模板時,將模板內容插入到中即可。這顆子樹形成了自己的閉合空間,比如子樹可以包含與父文檔中重復的和樣式,而不會相沖突。 原生模板的優勢 延遲了資源加載 延遲了加載和處理模板所引用的資源的時機,這樣,用戶就能夠在模板中使用任意多的資源,卻不阻礙頁面的渲染。 延遲了渲染內容 無論模板在什么位置,瀏覽器不...
摘要:此即如何實現局部樣式化的原理。這是一個絕佳的方式,開發者可以在組件內部封裝響應用戶交互或者狀態的行為,然后基于宿主元素來樣式化內部節點。 原文請查閱這里,略有刪減,本文采用知識共享署名 4.0 國際許可協議共享,BY Troland。 這是 JavaScript 工作原理的第十七章。 showImg(https://segmentfault.com/img/remote/1460000...
摘要:向影子樹添加的任何內容都將成為宿主元素的本地元素,包括,這就是影子實現樣式作用域的方式。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 17 篇。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! 如果你錯過了前面的章節,可以在這里找到它們: JavaScript 是如何工作的:引擎,運行時和調用堆棧的概述! JavaScript 是如何工作...
摘要:若自定義元素標簽名稱不可用則摒棄??傊?,自定義元素讓開發者的代碼更易理解和維護,并分割為小型,可復用及可封裝的模塊。被稱為自定義元素接口,雖然現在仍然可用,但是已經被棄用并被認為是糟糕的實現。 原文請查閱這里,略有刪減,本文采用知識共享署名 4.0 國際許可協議共享,BY Troland。 這是 JavaScript 工作原理第十九章。 概述 在 前述文章中,我們介紹了 Shadow ...
閱讀 1898·2021-11-24 09:39
閱讀 2134·2021-09-22 15:50
閱讀 1991·2021-09-22 14:57
閱讀 699·2021-07-28 00:13
閱讀 1065·2019-08-30 15:54
閱讀 2356·2019-08-30 15:52
閱讀 2686·2019-08-30 13:07
閱讀 3787·2019-08-30 11:27