Shadow DOM是指浏览器的一种能力,它允许在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中。

 
Shadow DOM 解决了 DOM 树的封装问题。
 
 
有了 Shadow DOM,元素就可以和一个新类型的节点关联。这个新类型的节点称为 shadow root。与一个 shadow root 关联的元素称作一个 shadow host。shadow host 的内容不会渲染;shadow root 的内容会渲染。
 

比如,你拥有如下的标记:

<button>Hello, world!</button><script>var host = document.querySelector('button');var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';</script>
因此,相比显示以下内容
 
Hello, world!
 
页面将会呈现如下内容
こんにちは、影の世界!
 

不仅如此,若页面中的 JavaScript 想获得按钮的 textContent 是什么,它不会得到 “こんにちは、影の世界!”,而是 “Hello, world!”,因为 shadow root 下的 DOM 子树被封装了起来。

 
介绍一个(可能不被遵守的)经验法则, 你不应该把内容放到 Shadow DOM 中。内容必须放入文档内以便屏幕阅读器,搜索引擎,扩展等类似程序可以访问到。 在创建一个吸引人的,可重用的部件时,那些无意义的标记要放进 Shadow DOM 中,可内容还得留在页面里。
 
 
 

shadow dom 隔离代码 封装的更多相关文章

  1. JavaScript 是如何工作:Shadow DOM 的内部结构 + 如何编写独立的组件!

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

  2. 究竟什么是Shadow DOM?

    shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...

  3. 封印术:shadow dom

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

  4. 使用shadow dom封装web组件

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

  5. JS21. 使用原生JS封装一个公共的Alert插件(HTML5: Shadow Dom)

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

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

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

  7. 【Web技术】400- 浅谈Shadow DOM

    编者按:本文作者:刘观宇,360 奇舞团高级前端工程师.技术经理,W3C CSS 工作组成员. 为什么会有Shadow DOM 你在实际的开发中很可能遇到过这样的需求:实现一个可以拖拽的滑块,以实现范 ...

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

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

  9. 理解Shadow DOM(一)

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

随机推荐

  1. 编码格式简介:ASCII码、ANSI、GBK、GB2312、GB18030和Unicode、UTF-8,BOM头

    编码格式简介:ASCII码.ANSI.GBK.GB2312.GB18030和Unicode.UTF-8,BOM头 二进制: 只有0和1. 十进制.十六进制.八进制: 计算机其实挺笨的,它只认识0101 ...

  2. 【转】深入理解CSS定位中的偏移

    前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...

  3. NOIP2017SummerTraining0726

    三道比较简单的题,还以为是八校考试的题目,但是并不是,无语了,第三题其实看了挺久的,一看到图,就想到了二分图,网络流之类的算法,但是尽力往这个方向想了好久都没什么思路, 最后从简单入手,然而没什么结果 ...

  4. Struts 关联DTD 文件

    Struts 的xml 文件在Eclipse 中  默认是不会有提示的. 但是我们可以关联DTD 文件, 这样子就可以出现如下的struts   提示了 1. 首先得先确保自己有Struts2 的Sr ...

  5. excel表格数据导入数据库Oracle

    方法一: 1.创建数据表 CREATE TABLE T_USER (   ID             VARCHAR2(32) primary key,   NAME           VARCH ...

  6. php soap实现WebService接口

    nusoap是php写的一个功能文件,下载地址:http://pan.baidu.com/s/1i3mUQJr 一.不使用wsdl服务端 server.php <?php //包函nusoap. ...

  7. FPGA多时钟处理应用

    FPGA项目设计中,通常会遇到多时钟处理.即一个PLL输出多个时钟,根据条件选择合适的时钟用作系统时钟.方案一: 外部晶振时钟进入PLL,由PLL输出多个时钟,MUX根据外部条件选择时钟输出做为系统使 ...

  8. webpack——devtool里的7种SourceMap模式

    我们先来看看文档对这 7 种模式的解释: 模式 解释 eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL. source-map 生成一个S ...

  9. struts2-学习笔记(一)

     Struts2学习笔记(一) 一.Struts2概述 1. 是什么? Struts2 是一个非常优秀的MVC框架,基于Model2 设计模型 Struts2是一个M(模型---域--范围模型)V ...

  10. Java面向对象(封装性概论)

     Java面向对象(封装性概论) 知识概要:                   (1)面向对象概念 (2)类与对象的关系 (3)封装 (4)构造函数 (5)this关键字 (6)static关键 ...