什么是shadow DOM?

Shadow DOM（影子DOM）是一种用于在Web组件中封装HTML、CSS和JavaScript的技术。它是Web组件的一个重要特性，旨在将组件的结构、样式和行为封装在一个独立的、隔离的DOM树中，从而与主文档的DOM树相互隔离。

传统的Web开发中，CSS和JavaScript代码可以轻松地影响整个文档的结构和样式，导致容易发生冲突和代码污染。为了解决这些问题，Shadow DOM提供了以下主要功能：

封装：Shadow DOM允许组件的开发者将其结构、样式和行为封装在一个独立的DOM树中，不会与外部的DOM结构发生冲突，从而实现真正的封装。

隔离：组件内部的样式和JavaScript代码不会泄漏到外部文档中，也不会受到外部文档中的样式和代码的影响。这种隔离性使得组件的样式和行为可以更可靠地工作。

Scoped CSS：Shadow DOM中的样式规则仅适用于组件的内部，不会影响外部文档中的元素。这样可以避免样式冲突，同时也允许组件内部使用通用的样式类名，而不必担心与外部文档中的类名冲突。

继承：Shadow DOM中的组件可以继承外部文档的样式，因为外部文档的样式不能穿透进入Shadow DOM中。

Shadow DOM是Web组件技术的核心部分，它与其他Web技术（如HTML Templates、Custom Elements和HTML Imports）结合使用，使得开发者可以创建可复用、独立和高度封装的组件。这些特性对于构建复杂的Web应用程序和在大型项目中使用组件化开发非常有价值。