摘要:从中隐藏内容模板中的内容并不能视为的一部分,当我们查询节点时,绝对不会返回模板的节点。使用模板时,将模板内容插入到中即可。这颗子树形成了自己的闭合空间,比如子树可以包含与父文档中重复的和样式,而不会相冲突。
原生模板的优势
延迟了资源加载
延迟了加载和处理模板所引用的资源的时机,这样,用户就能够在模板中使用任意多的资源,却不阻碍页面的渲染。
延迟了渲染内容
无论模板在什么位置,浏览器不会把模板中的内容直接渲染出来。开发者可以将模板放在页面中的任意位置,然后根据具体的情形选择模板去渲染,而不必切换模板的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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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 ...
阅读 1848·2021-11-24 09:39
阅读 2055·2021-09-22 15:50
阅读 1739·2021-09-22 14:57
阅读 679·2021-07-28 00:13
阅读 1020·2019-08-30 15:54
阅读 2341·2019-08-30 15:52
阅读 2598·2019-08-30 13:07
阅读 3739·2019-08-30 11:27