原生模板的优势

  • 延迟了资源加载

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

  • 延迟了渲染内容

无论模板在什么位置，浏览器不会把模板中的内容直接渲染出来。开发者可以将模板放在页面中的任意位置，然后根据具体的情形选择模板去渲染，而不必切换模板的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. 计算a^b==a+b在（l，r）的对数Codeforces Round #597 (Div. 2)

    题:https://codeforces.com/contest/1245/problem/F 分析:转化为:求区间内满足a&b==0的对数(解释见代码) ///求满足a&b==0在区 ...

  2. mysql时区问题解决方案

    #url添加参数serverTimezone=UTC 1.jdbc:mysql://127.0.0.1:3306/mymusic?useUnicode=true&characterEncodi ...

  3. android完整资讯App、Kotlin新闻应用MVP + RxJava + Retrofit + Dagger2、优雅区间选择器等源码

    Android精选源码 Android完整资讯客户端源码 android展示注册进度效果源码 Android Wifi热点数据传输Socket 通信示例源码 Android Dota的辅助信息app源 ...

  4. FPGA的存储方式大全

    好的时序是通过该严密的逻辑来实现的.http://blog.csdn.net/i13919135998/article/details/52117053介绍的非常好 有RAM(随机存储器可读可写)RO ...

  5. Docker 安装 CentOS

    Docker 安装 CentOS CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise ...

  6. IO流文件拷贝

    目录 IO流文件拷贝 前言 字节流(使用FileInputStream和FileOutputStream读取每一个字节...) 字节流(使用FileInputStream和FileOutputStre ...

  7. MariaDB 外键

    drop database literatureDB; create database literatureDB; use literatureDB; # 类型表 create table `type ...

  8. 【JVM】面试题之死锁及问题是怎么定位

    前言 之前面试的时候被问到死锁这块的问题,借着最近学习jvm来总结下死锁相关的知识.如果有地方写的不到位的地方,麻烦读者及时提出,放在评论区,我这边也好及时改正. 回顾 所谓,温故而知新,首先回顾下, ...

  9. SpringBoot多数据源中的分布式事务

    虽然现在微服务越来越流行,我们的系统随之也拆分出来好多的模块功能.这样做的目的其实就是为了弥补单体架构中存在的不足.随着微服务的拆分,肯定设计到分库分表,但这之中肯定设计到分布式事务.最典型的例子就是 ...

  10. 吴裕雄--天生自然 R语言开发学习：基本统计分析（续三）

    #---------------------------------------------------------------------# # R in Action (2nd ed): Chap ...