Shadow DOM 是一种用于创建封装和隐藏 HTML 元素的技术。它可以将 HTML、CSS 和 JavaScript 封装在自定义元素内部，从而使其样式和行为不会被外部代码干扰。这可以在 Web 应用程序中提高组件化和模块化的程度，从而提高代码的可维护性和可重用性。
Shadow DOM 中的元素和样式是私有的，不能被外部代码访问或修改。这可以防止样式冲突和命名空间污染，从而使 Web 应用程序更加健壮和可靠。在 Shadow DOM 中，可以使用 CSS 选择器、伪元素和样式规则来定义自定义元素的样式和行为，而不会影响到其他元素。
Shadow DOM 由两部分组成：Shadow DOM 树和 Shadow DOM 节点。Shadow DOM 树是一棵独立于主文档树的树，它包含了自定义元素及其子元素的结构和样式。Shadow DOM 节点是 Shadow DOM 树中的节点，它们包含了 HTML、CSS 和 JavaScript 代码。
要创建 Shadow DOM，需要使用 Element.attachShadow() 方法创建一个 Shadow DOM 节点，并将其附加到自定义元素上。然后，可以使用 HTML 和 CSS 来构建自定义元素的内容和样式。
总之，Shadow DOM 是一个强大的技术，可以提高 Web 应用程序的可维护性和可重用性，使开发人员能够更好地管理和控制自定义元素的样式和行为。
举个栗子
- 创建一个自定义元素，并将其附加一个 Shadow DOM：
class MyCustomElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>
h1 {
color: red;
}
</style>
<h1>Hello, World!</h1>
`;
}
}
customElements.define('my-custom-element', MyCustomElement);
在这个例子中，我们创建了一个 MyCustomElement 类，继承自 HTMLElement。在构造函数中，我们使用 Element.attachShadow() 方法创建一个 Shadow DOM，并将其附加到自定义元素上。然后，我们在 Shadow DOM 中添加了一个 <h1> 元素和一个样式规则，用于将其文本颜色设置为红色。
- 将外部样式表应用于 Shadow DOM：
class MyCustomElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'my-styles.css';
shadowRoot.appendChild(link);
shadowRoot.innerHTML = `
<h1>Hello, World!</h1>
`;
}
}
customElements.define('my-custom-element', MyCustomElement);
在这个例子中，我们创建了一个 link 元素，并将其添加到 Shadow DOM 中。这个 link 元素指向了一个外部样式表 my-styles.css，该样式表中包含了用于样式化自定义元素的样式规则。
- 使用插槽（slot）在 Shadow DOM 中插入内容：
class MyCustomElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>
h1 {
color: red;
}
</style>
<h1><slot></slot></h1>
`;
}
}
customElements.define('my-custom-element', MyCustomElement);
在这个例子中，我们使用 <slot> 元素在 Shadow DOM 中插入了内容。在自定义元素的标记中，我们可以在 <my-custom-element> 和 </my-custom-element> 标记之间插入任何 HTML 内容，这些内容将会插入到 Shadow DOM 中的 <slot> 元素中。在这个例子中，我们将插入的内容放在了 <h1> 元素中，这样就可以将其文本颜色设置为红色。
