JavaScript是如何工作
这是专门探索 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/类名称，而无需担心命名冲突。shadow dom
本文假设你已经熟悉 dom 及其它的 api 的概念。如果不熟悉，可以在这里关于它的详细文章—— https://developer.mozilla.org...。
阴影 dom 只是一个普通的 dom，除了两个区别:
创建/使用的方式 与页面其他部分有关的行为方式通常，你创建 dom 节点并将其附加至其他元素作为子项。 借助于 shadow dom，您可以创建作用域 dom 树，该 dom 树附加至该元素上，但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。 您在影子中添加的任何项均将成为宿主元素的本地项，包括
通常，创建 dom 节点并将它们作为子元素追加到另一个元素中。借助于 shadow dom，创建一个作用域 dom 树，附该 dom 树附加到元素上，但它与实际的子元素是分离的。这个作用域的子树称为 影子树，被附着的元素称为影子宿主。向影子树添加的任何内容都将成为宿主元素的本地元素，包括
创建 shadow 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（上一篇： 我朋友的妹妹是个女汉子