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. Storm同步调用之DRPC模型探讨

    摘要:Storm的编程模型是一个有向无环图,决定了storm的spout接收到外部系统的请求后,spout并不能得到bolt的处理结果并将结果返回给外部请求.所以也就决定了storm无法提供对外部系统 ...

  2. iOS9.3越狱

    转载:http://bbs.feng.com/read-htm-tid-10680439.html   首先是Windows英文版越狱的的教程 下载 Cydia Impactor 工具(用来安装越狱A ...

  3. 使用jquery的方法和技巧2,点击多选框的jquery响应

    使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二 ...

  4. JAVA 反射(1)

    getDeclaredField是可以获取一个类的所有字段. getField只能获取类的public 字段.

  5. ERROR! MySQL server PID file could not be found!的解决方法

    启动MySQL服务 [root@test vhosts]# /etc/init.d/mysqld restart 提示错误: ERROR! MySQL server PID file could no ...

  6. Python 开发之路

    强烈推荐地表最强博客:http://www.cnblogs.com/wupeiqi Python开发[第一篇]:目录 Python开发[第二篇]:初识Python Python开发[第三篇]:Pyth ...

  7. javascript 三种弹出对话框

    第一种:alert()方法 第二种:confirm()方法 返回一个布尔值,根据返回的值可以执行相应操作. 第三种: prompt()方法 返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面 ...

  8. C#线程池多线程Socket通讯 服务器端和客户端示例

    using System; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading; ...

  9. SSH/HTTPS安全的本质都依赖于TLS/SSL

    1.SSH/HTTPS的安全本质是TLS/SSL. 2.1990年互联网上的网页主要是静态内容,作为信息发布,使用HTTP明文传输是可以的.不过,后来很多公司开始使用网页进行金融交易,例如:股票,于是 ...

  10. Js全选 添加和单独删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...