核心提示：什么是 Shadow DOM ？引用 MDN 上的原文是这样说的： Shadow DOM 为 Web 组件中的 DOM 和 CSS 提供了封装。Shadow DOM 使得这些东西与主文档的 DOM 保...
什么是 Shadow DOM ？
引用 MDN 上的原文是这样说的：
Shadow DOM 为 Web 组件中的 DOM 和 CSS 提供了封装。Shadow DOM 使得这些东西与主文档的 DOM 保持分离。你也可以在一个Web组件外部使用 Shadow DOM 本身。
为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。
利用这些特性，可以使得 Web 组件的封装变得更加容易和可行。
综上，可以认为 Shadow DOM 是主要是为了解决一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界问题而提出的。
