内容简介：Shadow DOM用官方的翻译来说就是影子 DOM，他能够为Web组件中的 DOM和 CSS提供了封装，实际上是在浏览器渲染文档的时候会给指定的DOM结构插入编写好的DOM元素，但是插入的Shadow DOM 会与主文档的DOM保持分离，也就是说Shadow DOM不存在于主DOM树上。Shadow DOM 需要append某一个DOM元素上，但是Shadow DOM封装出来的DOM元素是独立的，外部的配置不会影响到内部，内部的配置也不会影响外部。但是我们还是能够通过js或者css来控制Shadow DO
1、Shadow DOM的概念
Shadow DOM用官方的翻译来说就是影子 DOM，他能够为Web组件中的 DOM和 CSS提供了封装，实际上是在浏览器渲染文档的时候会给指定的DOM结构插入编写好的DOM元素，但是插入的Shadow DOM 会与主文档的DOM保持分离，也就是说Shadow DOM不存在于主DOM树上。
Shadow DOM 需要append某一个DOM元素上，但是Shadow DOM封装出来的DOM元素是独立的，外部的配置不会影响到内部，内部的配置也不会影响外部。但是我们还是能够通过js或者css来控制Shadow DOM里面封装好的元素。
在我们勾选了控制台的show user agent shadow DOM后，我们看video标签的时候会发现平时隐藏看不见的元素。
2、Shadow DOM的作用
上文讲过 ，Shadow DOM 是游离在 DOM 树之外的节点树，因此其拥有优秀的密封性。
也就是说，我们在开发组件的时候，可以利用浏览器为我们提供的这一个强大的封装功能去隐藏一些实现细节。开发者在使用我们开发组件的时候一目了然，不需要他关心的细节我们可以通过Shadow DOM隐藏掉，只给开发者暴露他们需要的接口便可。
3、Shadow DOM的创建方法
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
架构真经
马丁L. 阿伯特（Martin L. Abbott）、迈克尔T.费舍尔（Michael T. Fisher） / 机械工业出版社 / 2017-4 / 79
前言 感谢你对本书第2版感兴趣！作为一本入门、进修和轻量级的参考手册，本书旨在帮助工程师、架构师和管理者研发及维护可扩展的互联网产品。本书给出了一系列规则，每个规则围绕着不同的主题展开讨论。大部分的规则聚焦在技术上，少数规则涉及一些关键的思维或流程问题，每个规则对构建可扩展的产品都是至关重要的。这些规则在深度和焦点上都有所不同。有些规则是高级的，例如定义一个可以应用于几乎任何可扩展性问题的模......一起来看看 《架构真经》 这本书的介绍吧!
