Web Components 是一种前端技术，可以将网站分解成自定义的可重用组件，开发者可以在不同的页面和项目中使用这些组件。其中，Shadow DOM 是 Web Components 中的一个关键概念。
什么是 Shadow DOM？
Shadow DOM 是一种将网页分割成多个 DOM 树的技术，每个 DOM 树相互独立，不会与页面上其他 DOM 树发生干扰。每个 Shadow DOM 都可以包含 HTML 和 CSS，类似于一个小型的私有模板，可以自主控制自己的样式和结构。
Shadow DOM 的作用
Shadow DOM 的作用在于对网页进行更好的封装和组织。它可以使开发人员开发出来的组件更具有可重用性，同时还能使得这些组件之间的逻辑关系更加明确。
Shadow DOM 的另一个作用是保护组件，防止组件样式和结构被外部 DOM 所改变造成组件的异常。
如何使用 Shadow DOM？
Shadow DOM 中的节点和普通的节点是有一些区别的。一个 Shadow DOM 中的节点需要用一个 ShadowRoot 类进行包裹，这个 ShadowRoot 可以通过 element.attachShadow() 进行创建。
// javascriptcn.com 代码示例
<template id="custom-component">
<style>
/* 自定义组件的样式 */
</style>
<h2>自定义组件的标题</h2>
<slot></slot>
/* 内容插入的位置 */
</template>
<custom-component>
<!-- 插入自定义组件内容 -->
</custom-component>
<script>
const template = document.querySelector('#custom-component');
const shadowRoot = this.attachShadow({ mode: 'open' });
const clone = document.importNode(template.content, true);
shadowRoot.appendChild(clone);
</script>上述代码中，我们首先定义了一个标准的 custom-component 组件，并在其中设置了组件的样式和结构，其中的 slot 表示的是一个内容插入的位置，用于引用此组件时插入其他节点。
接下来，我们首先需要获取到 Shadow DOM 节点，然后通过 document.importNode() 方法将节点复制一份再插入到 Shadow DOM 中即可。在这个过程中，我们还需要设置 Shadow DOM 的打开模式，attachShadow({ mode: 'open' }) 中的 open 表示 Shadow DOM 将会对外部开放，允许外部节点进行访问，closed 则表示 Shadow DOM 对外部节点进行封闭。
Shadow DOM 的样式继承
在 Shadow DOM 中，样式的继承是一个比较复杂的问题。当我们定义一个 Shadow DOM 组件时，其内部的样式不会影响其他 DOM 中的元素，但是在 Shadow DOM 中定义的样式也不会被外部 DOM 所继承。
<custom-component> <h3>自定义组件的副标题</h3> </custom-component> <custom-component></custom-component>
在上述代码中，由于样式继承的原因，组件内的副标题会继承自组件内部的样式，但是当我们使用两次组件的时候，第二个组件内部的副标题就不会去继承第一个组件内部的样式。这就是 Shadow DOM 样式继承的特点。
总结
通过学习 Shadow DOM，我们可以更好地认识 Web Components 技术的构成，进而准确地掌握由多个 DOM 树构成的组件体系结构。在使用 Shadow DOM 的过程中，我们需要注意其样式继承的问题，并适当地选择 Shadow DOM 的打开/封闭模式，以便更好地保护组件的样式结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7546df6b2d6eab3fccc16