为什么我的文档中有#shadow-root，为什么它覆盖了我的CSS

#shadow-root 是 Web Components 标准中的一个重要概念，它允许开发者创建封装的组件，这些组件拥有自己的 DOM 结构和样式，不会与页面上的其他元素发生冲突。当你在文档中看到 #shadow-root，这意味着某个元素使用了 Shadow DOM。

基础概念

Shadow DOM 提供了一种将 DOM 和样式封装在组件内部的方式，使得组件的内部实现对外部是隔离的。这种封装性有助于避免全局样式污染和脚本冲突。

为什么它覆盖了我的CSS？

Shadow DOM 的封装性意味着组件内部的样式只会应用到组件的内部元素上，而不会影响到外部的元素。如果你发现外部定义的 CSS 样式没有应用到 Shadow DOM 内部的元素上，这是因为 Shadow DOM 形成了一个样式隔离的环境。

解决方法

1. 使用 ::slotted() 伪元素 如果你需要影响 Shadow DOM 内部通过 <slot> 插入的内容，可以使用 ::slotted() 伪元素。
2. 使用 ::slotted() 伪元素 如果你需要影响 Shadow DOM 内部通过 <slot> 插入的内容，可以使用 ::slotted() 伪元素。
3. CSS 变量（自定义属性） 通过 CSS 变量，可以在 Shadow DOM 外部定义样式，并在内部使用。
4. CSS 变量（自定义属性） 通过 CSS 变量，可以在 Shadow DOM 外部定义样式，并在内部使用。
5. JavaScript 操作 如果需要动态改变样式，可以通过 JavaScript 直接操作 Shadow DOM 内部的元素。
6. JavaScript 操作 如果需要动态改变样式，可以通过 JavaScript 直接操作 Shadow DOM 内部的元素。

应用场景

• 自定义元素：创建可重用的组件，如自定义按钮、输入框等。
• 封装性要求高的应用：如仪表板、嵌入式应用等，需要避免样式冲突的场景。

类型

• Open Shadow DOM：可以通过 JavaScript 访问和修改。
• Closed Shadow DOM：对外部完全封闭，不能通过常规方式访问内部结构。

了解 #shadow-root 和 Shadow DOM 的工作原理，可以帮助你更好地管理和设计 Web 应用的组件化结构，同时解决样式覆盖的问题。