在Shadow DOM使用原生模板

JackXue程序生涯 2019-06-26

原生模板的优势

  • 延迟了资源加载

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

  • 延迟了渲染内容

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

JackXue程序生涯

JackXue程序生涯

相关推荐

将你的 Virtual dom 渲染成 Canvas

一个基于 vue 的 virtual dom 插件库，按照Vue render 函数的写法，直接将 Vue 生成的 Vnode 渲染到 canvas 中。支持常规的滚动操作和一些基础的元素事件绑定。这些信息是需要从接口取的，而且每个人都不一样。第一次碰到这

星星有所不知 / 0评论 2020-10-12

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle / 0评论 2020-09-28

JavaScript 如何计算文本的行数的实现

思路：用2个块统计行高，一个不加高度限制用来统计行数，一个加高度限制用来显示。当然总高度的计算必须是文字所在的 DOM 没有对高度的限制，随着文本的增加 DOM 要随之变高才行；最后还要考虑 DOM 的样式padding和margin对高度的影响。总结一下

huaoa / 0评论 2020-09-14

DOM事件流的三个阶段

事件流之冒泡与捕获：。　　假如我们在页面上有一个 button 标签。　　　　　　a :button. 　　　　　 d : window. 　　　　　　依次触发 a 、b、c、d. 　　　　个人总结： 点击元素时，元素从内向外扩展是冒泡，反之收缩是捕获。D

北京老苏 / 0评论 2020-08-17

JS中DOM元素的操作

<button id="btn" class="btnlist" name="btn_n">点我一下</button>. innerHTML语法: ele.innerHTM

luvhl / 0评论 2020-08-17

实现虚拟DOM

function createElement{ //创建虚拟DOM. function render{ //把虚拟DOM渲染到真实DOM节点。let elementList = [], //保存着一些元素数组，这些元素数组的第一项是父元素，其他项是子元素。

Kakoola / 0评论 2020-07-29

JavaScript DOM 控制CSS

JavaScript更改P元素的样式：1.<html>2.<body>3.<p id="p2">Hello World!"red";6.</script>7.<p

drdrsky / 0评论 2020-07-29

React：虚拟DOM和diff算法

目的：为了实现页面元素的高效更新。

hyMiss / 0评论 2020-07-27

Vue虚拟DOM

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。diff 算法 — 比较两棵虚拟 DOM 树的差异；p

书虫媛 / 0评论 2020-07-08

一篇文章教会你如何将DOM转换为virtual DOM

Virtual DOM是虚拟节点，它通过Javascript的Object对象模拟DOM中的节点，然后通过特定的render方法将其渲染成真实的DOM节点。浏览器在处理DOM时，总会附加很多属性，这会使得每一次数据更新，渲染很慢。Virtual　DOM利用

liaoxuewu / 0评论 2020-07-08

减少浏览器的回流和重绘

避免过多样式嵌套。避免使用css表达式。使用绝对定位可以让动画元素脱离文档流。尽量不适用float布局。图片最好设置好width和height. 尽量简化浏览器不必要的任务，减少页面重新布局。使用viewpoint设置屏幕缩放级别。避免使用引起回流的和重绘

SIMONDOMAIN / 0评论 2020-07-08

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版

爱读书的旅行者 / 0评论 2020-07-07

浏览器是如何渲染页面的？

a.解析HTML文件，创建DOM树。自上而下，遇到任何样式与脚本都会阻塞；c.将CSS与DOM合并，构建渲染树；解析HTML构建dom树—>构建render树—>布局render树—>绘制页面。

tianzyc / 0评论 2020-07-04

虚拟DOM和diff算法

Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children

Lophole / 0评论 2020-07-04

[Javascript] HTML5 DOM project

<p>You have <span class="todos-count"></span> items</p>. <button type="button" cl

Lophole / 0评论 2020-06-28

JS事件、Bom对象和Dom对象（1）（乐字节架构）

如需要跟多资料请点击右侧 → 这是一条不归路，有秃头风险，请慎重选择！事件 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

liaoxuewu / 0评论 2020-06-26

前后端分离中前端DOM渲染页面

html 仅仅作为静态文件，客户端端在请求时，服务端将数据返回给客户端，再通过本地的js代码读取返回的数据再使用DOM将这些数据渲染到html中，保留的代码中天然的展示层和数据层的分离；在我们校园帮帮网的项目中用于在页面加载时接受后端问题列表数据然后现实在

ApeLife技术 / 0评论 2020-06-26

JS HTML DOM

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、Ja

北京老苏 / 0评论 2020-06-25

【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象

你需要先找到他的父元素。<p id="p1">这是一个段落。我想说，这用CSS标签选择器不好吗？但是这操作跟数组没有区别啊。。。只不过Java的数组要求长度是固定且数据类型一致的。NodeList对象是一个从文档中获取的节点

Lophole / 0评论 2020-06-14

【JS】04 DOM 文档对象模型 P1 查找元素、改变内容、绑定事件

document.write() 可用于直接向 HTML 输出流写内容。【绝对不要在文档加载完成之后使用 document.write()。修改 HTML 内容的最简单的方法是使用 innerHTML 属性。<p>以上段落通过脚本修改。DOM对

SIMONDOMAIN / 0评论 2020-06-14

详解用js代码触发dom事件的实现方案

前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseu

firstboy0 / 0评论 2020-06-14

jquery隐式迭代（遍历内部dom元素） jquery设置样式方法

jquery设置样式方法。jquery隐式迭代

SIMONDOMAIN / 0评论 2020-06-14

DOM

当网页被加载时，浏览器会创建页面的文档对象模型。<p>以上段落通过脚本修改。<p>弹窗-提示浏览器 cookie 是否可用。onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时，会调用 upperCase(

luvhl / 0评论 2020-06-13

Vue生命周期（详解版，会持续补充！！！）

Vue的生命周期通俗来讲就是我们用Vue写的网页在浏览器运行起来之后，我们写的代码要在内存里执行。这个实例从创建一直到我们关掉浏览器这个实例消亡，这一段时间里，Vue这个框架干了啥，Vue的实例做了啥，先做啥，后做啥，这一系列事情的关系是怎样的，这就是Vu

luvhl / 0评论 2020-06-12

深入浅出Vue.js(二) 虚拟DOM &amp; diff算法

vnode可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点。　　　　this.data = data //节点上的数据 eg：attrs、class、style. 　　　　this.key = data && data.key

Lophole / 0评论 2020-06-10

2、react-生命周期1※※※

生命周期： 一个人的生命周期：从出生到去世 出生得那一刻就是当前这一个人特性固定下来得那一刻：实例化期 出生了之后生长知道死的那一刻：生存期 去世了：销毁期 所以对于一个组件来说它的生命周期是三个时期：实例化期、生存期和销毁期 实

luvhl / 0评论 2020-06-08

Web APIs(DOM、BOM)综述

Web APIs 和 JS 基础关联性。API是一些预先定义的函数，目的是提供应用程序 与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API 。

playis / 0评论 2020-06-07

DOM 事件流 事件冒泡

<!DOCTYPEhtml>. <metaname="viewport"content="width=device-width,initial-scale=1.0">. position:re

书虫媛 / 0评论 2020-06-06

浅谈web三大框架优缺点及适用场景之React框架

从这个定义来看，可以发现React是一个View层，它的作用是提供了一套数据机制。React是第一个采用Virtual DOM的、流行的前端框架。传统的DOM操作是直接在DOM上操作的，当需要修改一系列元素中的值时，就会直接对DOM进行操作。因此，对于不需

书虫媛 / 0评论 2020-06-05

DOM对HTML元素的增删改操作和事件概念和事件监听

节点cloneNode，当deep为true时，表示复制当前节点以及当前结点的全部后代节点。创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。<input id=”btn1” type="

书虫媛 / 0评论 2020-06-03

2020/6/1 BOM模型和DOM模型

　　提示输入框：window.prompt(); 注意：返回值类型是字符串，如果需要计算需要进行类型转换。　　删除定时器：clearInterval();　　location.href="文档所在地址的URL地址"；　　　　　　　　　　

luvhl / 0评论 2020-06-01

dom对象的属性和方法--乐字节java

<font color="red">DOM</font>：Document Object Model 文档对象模型。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节

SIMONDOMAIN / 0评论 2020-05-31

Vue里ref ($refs)用法

　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。console.log; // <p>标签dom元素 ref在外面的元素上</p>} ). 在学习 jq 时，我们首要任务就是

SIMONDOMAIN / 0评论 2020-05-29

vue常见面试题

而且v-if不停的销毁和创建比较消耗性能。作用主要是为了高效的更新虚拟DOM。所以，不推荐v-if和v-for同时使用。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

SIMONDOMAIN / 0评论 2020-05-27

用DOM实现对XML文件的解析

DOM的 xml.dom.minidom 子模块、xml.dom.pulldom 子模块分别提供两种形式的解析器。该解析器解析成功，返回指定 XML 文件的一个文档对象。[‘Enemy Behind‘, ‘War, Thriller‘, ‘DVD‘, ‘P

Yakamoz / 0评论 2020-05-26

Python学习第82天（JavaScript的DOM对象）

　　到了JavaScript中最重要的部分，DOM对象，基本就是怎么找到对应的标签，然后给他加上各种酷炫的效果。　　　　1.什么是 DOM？　　　　　　DOM 是 W3C的标准。　　　　　　"W3C 文档对象模型是中立于平台和语言的接口，它允许程

hyMiss / 0评论 2020-05-19

三 jQuery的DOM操作

特点：在jq1.6版本推出，解决attr 设计缺陷，专门来处理布尔类型的属性。removeClass()判断class属性中是否有有此值，如果有表示删除。对象1和对象2是兄弟关系。* 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属

liaoxuewu / 0评论 2020-05-19

如何理解DOM

首先DOM全称为,是针对HTML和XML的API。可以理解为DOM就是一系列功能集合。从一下几个方面理解。第一阶段涉及浏览器解析文档以确定最终将在页面上渲染的内容，第二阶段涉及浏览器执行渲染。渲染树是将在页面上呈现的HTML元素及其相关样式的表示。DOM的

liaoxuewu / 0评论 2020-05-19

Vue 通过ref获取DOM元素

ref 被用来给元素或子组件注册引用信息。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：。-- `vm.$refs.p` will be the DOM node -->. -- `vm.$re

书虫媛 / 0评论 2020-05-15

5.12 dom的元素获取和设置

# DOM-下## 一、操作1. 属性操作 - ....2. 样式操作 - 设置 - 什么时候会通过js设置样式？- 默认样式都在css中写了 - 必然是和用户产生和交互的时候 - 什么时候会和用户产生交互？- 至少至少是在项目写完了，上线之后，意味着cs

luvhl / 0评论 2020-05-14

5.11 dom的选择器

# 一、DOM## 0. js的三大组成部分的关系- ECMAScript规定，如何在BOM中操作DOM## 1. 介绍1. DOM文档对象模型，对象：document - DOM不属于BOM - window对象身上有提供document对象 - DOM

liaoxuewu / 0评论 2020-05-11

3.jQuery操作DOM对象的方法

$.nextUntil.prop;//找到同级的下面的元素，直到h1元素为止，且只找到里面input[type="checkbox"]的元素。-11.closest()获得匹配选择器的第一个祖先元素，从自己开始沿DOM树向上。$.aft

liaoxuewu / 0评论 2020-05-10

jQuery对DOM节点进行操作(包裹节点)

　　wrap() :把匹配到的每一个元素用指定的HTML元素包裹起来。$("p").each(function(index){　　　　　　　　　　// 包裹。　　unwrap() 方法移除被选元素的父元素。

hyMiss / 0评论 2020-05-09

jQuery对DOM节点进行操作(删除节点)

　　remove()：用于从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。该方法的返回值时一个指向已被删除的节点的引用，以后也可以继续使用这些元素。　　detach()：和remove()方法一样，也是删除DOM中匹配的元素，

小仙儿 / 0评论 2020-05-09

JavaScript html Dom文档对象模型

　　当网页被加载时，浏览器会创建页面的文档对象模型。

SIMONDOMAIN / 0评论 2020-05-09

Vue中$nextTick原理

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常

liaoxuewu / 0评论 2020-05-06

jQuery DOM

attr（）的回调函数：回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

89463661 / 0评论 2020-05-03

认识 DOM

DOM可以把 HTML 看作是文档树。通过 DOM 提供的 API 可以对树上的节点进行操作。DOM 中的 "O" 是 Object (对象)。DOM 中的 "M" 是 Model (模型)。　　当把页面加载到浏览器

hyMiss / 0评论 2020-05-01

JavaScript技巧——变量Dom对象的所有属性

　　每一个attribute属性有一个附加属性specified，当属性是HTML Element的属性，或者是通过setAttribute方法进行的添加的时候，它的值为 true。

liaoxuewu / 0评论 2020-04-29

DOM模型-事件模型

我们先来谈谈事件：事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。一旦这个事件发生，就会执行监听函数。该方法没有返回值。useCapture：布尔值，表示监听函数是否在捕获阶段触发，默认为false。

hyMiss / 0评论 2020-04-27