原生模板的优势

  • 延迟了资源加载

延迟了加载和处理模板所引用的资源的时机，这样，用户就能够在模板中使用任意多的资源，却不阻碍页面的渲染。

  • 延迟了渲染内容

无论模板在什么位置，浏览器不会把模板中的内容直接渲染出来。开发者可以将模板放在页面中的任意位置，然后根据具体的情形选择模板去渲染，而不必切换模板的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 v1：独立的网络组件
影子DOM

在Shadow DOM使用原生模板的更多相关文章

  1. JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）

    效果预览 Shadow DOM Web components  的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...

  2. 封印术：shadow dom

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<鼠标滚动插件smoovejs和wowjs> 作者主页:myvin 博主QQ:851399101(点击Q ...

  3. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  4. JavaScript 是如何工作：Shadow DOM 的内部结构 + 如何编写独立的组件！

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  5. 【Web技术】401- 在 React 中使用 Shadow DOM

    本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...

  6. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  7. 使用shadow dom封装web组件

    什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <v ...

  8. 理解Shadow DOM(一)

    1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...

  9. webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件

    直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...

随机推荐

  1. Exynos4412开发板-网络-同一网段

    1.1 同一网段在不少实验中,都会需要用到局域网的一些基础知识,在技术支持的过程中,发现不少用户对于这个概念非常模糊,导致 IP 地址或者网络环境稍微有点变化,就无法实现实验.如果没有接触过这个概念, ...

  2. CNN Mini-Fashion数据集以及Pytorch初体验

    下载Fasion-MNIST数据集 Fashion-MNIST是一个替代原始的MNIST手写数字数据集的另一个图像数据集. 它是由Zalando(一家德国的时尚科技公司)旗下的研究部门提供.其涵盖了来 ...

  3. springboot+mybatis登录注册

    接上上一篇博客的继续往下做,上一篇已经实现了mybatis自动生成代码,和连接数据库测试部分 本篇我们添加一些功能,实现登录注册,时间原因,前端实现的很粗糙,以后有时间再改吧 首先看一下数据库的构成, ...

  4. 吴裕雄--天生自然python学习笔记：人脸识别用到的特征文件haarcascade_frontalface_default.xml下载

    下载地址:https://github.com/opencv/opencv/tree/master/data/haarcascades 1.找到haarcascade_frontalface_defa ...

  5. C++线程池的实现

    线程池,简单来说就是有一堆已经创建好的线程(最大数目一定),初始时他们都处于空闲状态,当有新的任务进来,从线程池中取出一个空闲的线程处理任务,然后当任务处理完成之后,该线程被重新放回到线程池中,供其他 ...

  6. 数据结构与算法 python课后题（未完成）

    挖一个坑,先立个flag,后面慢慢填坑. 先放个其它人写的链接

  7. Factual question|具体特殊

    Factual question:答案一定出于文章,不是总结 流程:找定位词做连连看,找对定位词,先看此句,然后看选项回文对照.如果找不到找上下两句话. 为了缩小范围,定位词是具体特殊,不要抽象词,可 ...

  8. every|each|the用于姓氏的复数形式|comrades-in-arms|clothes are|word|steel|affect|effect

    ________ man in the crowd raised his hand.  A. All  B. Each  C. Every  D. Both 题目解析 考查代词的用法.此句意思是:人群 ...

  9. 如何使用Outlook 客户端配置其他邮箱客户端收发邮件

    本文介绍Outlook2016客户端配置QQ邮箱收发邮件 1.打开Outlook客户端,文件->信息->-添加账户 2.输入需要添加的邮箱账户,点击连接 3.输入密码并连接 4.打开QQ邮 ...

  10. Excel中带字母的数字序列自增实现方法

    示例: 在A1单元格输入以下公式,然后向下填充公式 =".mr"&ROW()&" {margin-right: "&ROW()& ...