摘要： 深入JS系列17。
- 原文：Javascript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件！
- 作者：前端小智
Fundebug经授权转载，版权归原作者所有。
这是专门探索 Javascript 及其所构建的组件的系列文章的第 17 篇。
如果你错过了前面的章节，可以在这里找到它们：
- Javascript 是如何工作的：引擎，运行时和调用堆栈的概述！
- Javascript 是如何工作的：深入V8引擎&编写优化代码的5个技巧！
- Javascript 是如何工作的：内存管理+如何处理4个常见的内存泄漏！
- Javascript 是如何工作的：事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式！
- Javascript 是如何工作的：深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径！
- Javascript 是如何工作的：与 WebAssembly比较 及其使用场景！
- Javascript 是如何工作的：Web Workers的构建块+ 5个使用他们的场景!
- Javascript 是如何工作的：Service Worker 的生命周期及使用场景!
- Javascript 是如何工作的：Web 推送通知的机制!
- Javascript是如何工作的：使用 MutationObserver 跟踪 DOM 的变化!
- Javascript是如何工作的：渲染引擎和优化其性能的技巧!
- Javascript是如何工作的：深入网络层 + 如何优化性能和安全!
- Javascript是如何工作的：CSS 和 JS 动画底层原理及如何优化它们的性能！
- Javascript的如何工作的：解析、抽象语法树（AST）+ 提升编译速度5个技巧!
- Javascript是如何工作的：深入类和继承内部原理+Babel和 Typescript 之间转换!
- Javascript是如何工作的：存储引擎+如何选择合适的存储API!
Web Components 是一套不同的技术，允许你创建可重用的定制元素，它们的功能封装在你的代码之外，你可以在 Web 应用中使用它们。
Web组件由四部分组成:
- Shadow DOM（影子DOM）
- HTML templates（HTML模板）
- Custom elements（自定义元素）
- HTML imports（HTML导入）
在本文中主要讲解 Shadow DOM（影子DOM）
Shadow DOM 这款工具旨在构建基于组件的应用。因此，可为网络开发中的常见问题提供解决方案：
- 隔离 DOM：组件的 DOM 是独立的（例如，document.querySelector() 不会返回组件 shadow DOM 中的节点）。
- 作用域 CSS：shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏，页面样式也不会渗入。
- 组合：为组件设计一个声明性、基于标记的 API。
- 简化 CSS - 作用域 DOM 意味着您可以使用简单的 CSS 选择器，更通用的 id/类名称，而无需担心命名冲突。
本文假设你已经熟悉 DOM 及其它的 Api 的概念。如果不熟悉，可以在这里阅读关于它的详细文章—— https://developer.mozilla.org…。
阴影 DOM 只是一个普通的 DOM，除了两个区别:
-
创建/使用的方式
-
与页面其他部分有关的行为方式
通常，你创建 DOM 节点并将其附加至其他元素作为子项。 借助于 shadow DOM，您可以创建作用域 DOM 树，该 DOM 树附加至该元素上，但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。 您在影子中添加的任何项均将成为宿主元素的本地项，包括
。 这就是 shadow DOM 实现 CSS 样式作用域的方式
通常，创建 DOM 节点并将它们作为子元素追加到另一个元素中。借助于 shadow DOM，创建一个作用域 DOM 树，附该 DOM 树附加到元素上，但它与实际的子元素是分离的。这个作用域的子树称为 影子树，被附着的元素称为影子宿主。向影子树添加的任何内容都将成为宿主元素的本地元素，包括
影子根是附加到“宿主”元素的文档片段，元素通过附加影子根来获取其 shadow DOM。要为元素创建阴影 DOM，调用 element.attachShadow() :
var header = document.createElement('header');
var shadowRoot = header.attachShadow({mode: 'open'});
var paragraphElement = document.createElement('p');
paragraphElement.innerText = 'Shadow DOM';
shadowRoot.appendChild(paragraphElement);
规范定义了元素列表，这些元素无法托管影子树，元素之所以在所选之列，其原因如下：
- 浏览器已为该元素托管其自身的内部 shadow DOM（