前言
在初涉前端之时，我就始终在好奇一个问题，为什么像：
<input/><select></select><audio></audio><video></video>- ……
等等这些标签，看起来仿佛很简略，可为什么能够展现出那么丰盛简单的布局？过后我给本人的解释是：这些标签都是系统控制渲染的。
当初想想，那么解释如同有点情理，但终归没有波及到实质起因，专家级的解释应该是：以上这些元素都是以组件的形式存在，所展示进去的那些布局都是在组件外部定义好的，如果页面援用了这些元素标签，那它外部的布局都会渲染在页面上。
在介绍 Web Components 时讲到，它的第二项技术规范为 Shadow DOM。通过理解 Shadow DOM 的相干常识，或者能够解开下面的纳闷。
查看默认组件的 Shadow DOM
有人可能纳闷，既然说文章结尾列举的那些元素是组件，那为什么我在开发者工具中看到的构造是这样的：
有什么方法能够看到各个组件外部的 DOM 构造吗？答案是有的，步骤如下：
第一步：关上开发者工具，点击右上角的设置图标：
第二步：找到偏好设置 - 元素，而后对“显示用户代理 Shadow DOM”进行选中：
这时候，咱们再查看那些默认组件的内部结构，如下所示：
能够看到，这些默认标签下都蕴含一个“shadow root”而在 shadow root 中蕴含的是具体布局：
一个看似简简单单的 audio 元素，外面的布局还蛮简单的。这不禁让我想到一句话：功夫都在舞台外。
在下面的截图中，咱们看到了“shadow root”，它其实是 Shadow DOM 的一部分。
Shadow DOM 的概念
在介绍概念之前，咱们先来看看“shadow”这个单词的中文释义：
Shadow DOM，翻译过去就是“影子 DOM”。
影子当然都是藏在暗处，不容易让人发现的，就像文章结尾提到的那些默认元素，如果不通过设置，咱们外表上看到的就是简略的一个标签而已。
业余的解释就是：Shadow DOM 是 HTML 的一个标准，它容许浏览器开发者封装本人的 HTML 标签、CSS 款式和特定的 Javascrip 代码，同时也能够让开发人员创立相似 <video> 这样的自定义标签。
Shadow DOM 的意义
“组件化”备受追捧的起因天然是因为它独特的魅力，咱们只须要将定义好的组件通过简略的一组标签引入页面，就能够失去预约好的成果，并且能够在多处应用。
而 Shadow DOM 能在 Web Components 体系中占据重要的位置，是因为其具备良好的 密封性，次要体现在：
- 暗藏标记、款式和行为；
- 放弃代码隔离，保障页面的洁净整洁，各组件外部代码互不影响；
- 暗藏实现细节，便于应用更弱小的语法或性能。
这就意味着，如果咱们应用了 Shadow DOM，那就能够在它外部随便的施展，而不用放心这些施展会影响到页面的其余局部，变相地给了开发人员极大的自在。
想想已经小心翼翼地定义款式、绑定事件的时光吧，思念吗？
Shadow DOM 构造
Shadow DOM 容许将暗藏的 DOM 树附加到惯例的 DOM 树中——它以 Shadow root 节点为起始根节点，在这个根节点的下方，能够是任意元素，和一般的 DOM 元素一样，借用网上的一张图片：
上面是我依据本人的了解画进去的：
大家依据本人爱好，看哪一张更容易了解就对着哪张看，都无所谓的。对应到理论的文档中，其构造如下：
在以上的结构图中，咱们看到了几个生疏的名词，包含咱们在之前看到的“shadow root”，它们都是 Shadow DOM 的术语，接下来我解释一下它们各自的含意。
Shadow DOM 术语
Shadow host
一个惯例 DOM 节点，Shadow DOM 会被附加到这个节点上。
Shadow tree
Shadow DOM 外部的 DOM 树。
Shadow boundary
Shadow DOM 分界线。Shadow DOM 完结的中央，也是惯例 DOM 开始的中央。
Shadow root
Shadow tree 的根节点。
用法
挂载 Shadow DOM
可应用 Element.attachShadow() 办法给指定的元素挂载一个 Shadow DOM，并且返回对 ShadowRoot 的援用。
let hostEle = document.getElementById("myCard");
let shadowroot = hostEle.attachShadow({mode: "open"});管制 Shadow DOM
你能够应用同样的形式来操作 Shadow DOM，就和操作惯例 DOM 一样——例如增加子节点、设置属性，以及为节点增加本人的款式（例如通过 element.style 属性），或者为整个 Shadow DOM 增加款式（例如在 <style> 元素内增加款式）。不同的是，Shadow DOM 外部的元素始终不会影响到它内部的元素（除了 :focus-within 元素内增加款式），这为封装提供了便当。
注意事项
如果一个元素底下曾经有一个 Shadow DOM 挂载，持续给它挂载的话，会报错：
结束语
Shadow DOM 的次要作用就是其封装的个性，使得各组件的外部代码互不烦扰，提供一个平安的开发运行环境。
对于 Shadow DOM 的基本概念就先介绍这么多，接下来将介绍它的操作方法。
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！