摘要:从中隐藏内容模板中的内容并不能视为的一部分,当我们查询节点时,绝对不会返回模板的节点。使用模板时,将模板内容插入到中即可。这颗子树形成了自己的闭合空间,比如子树可以包含与父文档中重复的和样式,而不会相冲突。
原生模板的优势
延迟了资源加载
延迟了加载和处理模板所引用的资源的时机,这样,用户就能够在模板中使用任意多的资源,却不阻碍页面的渲染。
延迟了渲染内容
无论模板在什么位置,浏览器不会把模板中的内容直接渲染出来。开发者可以将模板放在页面中的任意位置,然后根据具体的情形选择模板去渲染,而不必切换模板的display属性,或者担心由于解析不需要的模板内容而带来的开销。
从DOM中隐藏内容
模板中的内容并不能视为DOM的一部分,当我们查询DOM节点时,绝对不会返回模板的节点。这样,模板就不会拖慢DOM节点的查询速度。模板终点内容在激活之前都可以视为隐藏的。
原生模板的用法在标签中编写模板,编写好的模板可以被插入到head body frameset等标签中,或者他们的任意后代标签中。
使用模板时,将模板内容插入到DOM中即可。 然后创建Shadow DOM,之后将模板中的内容填充到根元素中 shadow-dom 其实是浏览器的一种能力,它允许在浏览器渲染文档的时候向其中的 Dom 结构中插入一棵 DOM 元素子树,但是特殊的是,shadow DOM 子树并不在主 DOM树中。这颗子树形成了自己的『闭合空间』,比如shadow DOM子树可以包含与父文档中重复的ID和样式,而不会相冲突。 Shadow DOM v1:独立的网络组件 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/93253.html 摘要:从中隐藏内容模板中的内容并不能视为的一部分,当我们查询节点时,绝对不会返回模板的节点。使用模板时,将模板内容插入到中即可。这颗子树形成了自己的闭合空间,比如子树可以包含与父文档中重复的和样式,而不会相冲突。
原生模板的优势
延迟了资源加载
延迟了加载和处理模板所引用的资源的时机,这样,用户就能够在模板中使用任意多的资源,却不阻碍页面的渲染。
延迟了渲染内容
无论模板在什么位置,浏览器不... 摘要:此即如何实现局部样式化的原理。这是一个绝佳的方式,开发者可以在组件内部封装响应用户交互或者状态的行为,然后基于宿主元素来样式化内部节点。
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。
这是 JavaScript 工作原理的第十七章。
showImg(https://segmentfault.com/img/remote/1460000... 摘要:向影子树添加的任何内容都将成为宿主元素的本地元素,包括,这就是影子实现样式作用域的方式。
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇。
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!
如果你错过了前面的章节,可以在这里找到它们:
JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述!
JavaScript 是如何工作... 摘要:若自定义元素标签名称不可用则摒弃。总之,自定义元素让开发者的代码更易理解和维护,并分割为小型,可复用及可封装的模块。被称为自定义元素接口,虽然现在仍然可用,但是已经被弃用并被认为是糟糕的实现。
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。
这是 JavaScript 工作原理第十九章。
概述
在 前述文章中,我们介绍了 Shadow ... 阅读 2689·2021-09-22 15:41 阅读 1532·2021-08-19 10:54 阅读 1887·2019-08-23 15:11 阅读 3472·2019-08-23 10:23 阅读 1515·2019-08-22 16:28 阅读 865·2019-08-22 15:11 阅读 806·2019-08-22 14:53 阅读 788·2019-08-22 13:49
首先获得对模板节点的引用var template = document.querySelector("#atcq")
var root = document.querySelector("#atcq-root").createShadowRoot()
root.appendChild(template.content)
Shadow DOM简介
影子DOM相关文章
在Shadow DOM使用原生模板
Shadow DOM 内部构造及如何构建独立组件
JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件!
自定义元素探秘及构建可复用组件最佳实践
发表评论
0条评论
SunZhaopeng
男|高级讲师
TA的文章
阅读更多
如何访问自己的主机名-怎么查看自己电脑的主机名?
MoeCloud:79.2元/月/1GB内存/10GB SSD空间/2TB流量/10Gbps端口/K
手挽手带你学React:三档 React-router4.x的使用
有关getter 和 setter的使用
你应该知道的requestIdleCallback
在Shadow DOM使用原生模板
checkbox jquery 全选反选
lodash源码分析之List缓存