在Shadow DOM使用原生模板
原生模板的优势
- 延迟了资源加载
延迟了加载和处理模板所引用的资源的时机，这样，用户就能够在模板中使用任意多的资源，却不阻碍页面的渲染。
- 延迟了渲染内容
无论模板在什么位置，浏览器不会把模板中的内容直接渲染出来。开发者可以将模板放在页面中的任意位置，然后根据具体的情形选择模板去渲染，而不必切换模板的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使用原生模板的更多相关文章
- JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）
效果预览 Shadow DOM Web components 的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...
- 封印术：shadow dom
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<鼠标滚动插件smoovejs和wowjs> 作者主页:myvin 博主QQ:851399101(点击Q ...
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- JavaScript 是如何工作：Shadow DOM 的内部结构 + 如何编写独立的组件！
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
- 【Web技术】401- 在 React 中使用 Shadow DOM
本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...
- 【shadow dom入UI】web components思想如何应用于实际项目
回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...
- 使用shadow dom封装web组件
什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <v ...
- 理解Shadow DOM(一)
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件
直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...
随机推荐
- Python语言学习前提：python安装和pycharm安装
一.Windows系统python安装 1.python官网:https://www.python.org/downloads/ 2.官网首页:点击Downloads > Windows > ...
- for in 循环获取json中的键（key）与值（value）
一 .for in 循环 1.获取json中的键(key)与值(value): var data = {name:'张三',age:'20岁',sex:'男'}; for (var a in data ...
- python中安装surprise中出现error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools":
pip安装 安装之前要先进行numpy的安装 pip install numpy pip install surprise 安装出错: 安装surprise需要Microsoft visual c++ ...
- python--包package、模块module、类Class、Mixin类（未完成）
包package>模块module>类Class(包含了属性.方法.实例等概念) 模式一:一个包下面有多个py文件,即多个模块module 模式二:一个包下面包含多个子包packages ...
- python数据类型：Number数字
Python Number数据类型用于存储数值 数据类型是不允许改变的,如果改变Number数据类型的值,将从新分配内存空间 整型(int):整型或整数,是正或者负整数,不带小数点 长整型(long) ...
- django框架基础-ORM跨表操作-长期维护
############### 一对一跨表查询 ################ import os if __name__ == '__main__': os.environ.setde ...
- mysql简介/安装以及破解密码等
1.什么是数据库: 数据库即存放数据的仓库,只不过这个仓库是在计算机存储设备上,而且数据是按一定的格式存放的 过去人们将数据存放在文件柜里,现在数据量庞大,已经不再适用 数据库是长期存放在计算机内.有 ...
- Mac下通过FFMpeg实现Android手机推流和播放
一.Mac下搭建推流服务器(Nginx+RTMP+FFMpeg) 安装x264 git clone git://git.videolan.org/x264.git cd x264 ./configur ...
- 3DSMAX安装未完成，某些产品无法安装的解决方法
3DSMAX提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装3DSMAX失败提示3DSMAX安装未完成,某些产品无法安装,也有时候想重新安装3DSMAX的时候 ...
- Java IO: RandomAccessFile
原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) RandomAccessFile允许你来回读写文件,也可以替换文件中的某些部分.FileIn ...