内容简介：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的创建方法
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
产品经理手册（原书第4版）（白金版）
[美] 琳达·哥乔斯(Linda Gorchels) / 祝亚雄、冯华丽、金骆彬 / 机械工业出版社 / 2017-8 / 65.00
产品经理的职责起点是新产品开发，贯穿产品生命周期的全过程。本书按上下游产品管理进行组织。 在上游的新产品开发流程中，作者阐述了如何从市场、产品、行业、公司的角度规划企划方案，并获得老板、销售部、运营部的资源支持，推进新产品的项目流程，实现所有目标，制定和实施新产品发布。 下游产品的管理核心在于生命周期的管理，营销更是生命周期管理的重中之重。产品经理如何让产品满足客户需求，让客户获得对产......一起来看看 《产品经理手册（原书第4版）（白金版）》 这本书的介绍吧!
