Javascript Web组件和影子DOM如何防止跨组件泄漏CSS？

2008年，我们的团队研究了一种用Java为Javascript编写web组件的技术，这种技术可以向下编译

该小组的一名新成员说：

您将遇到组件的CSS和页面相互冲突的问题

结果证明他是对的

今天我和一个朋友在谈一件事。我问他如何停止页面的CSS和组件之间的冲突

他说,

有了Web组件，一切都在控制之中。它解决了CSS泄漏的问题

---

我的问题是：Web组件和Shadow DOM如何防止跨组件的CSS泄漏？

因为Shadow DOM的设计正是为了解决开发Web组件时遇到的问题，正如Google在：

独立DOM：组件的DOM是自包含的（例如document.querySelector（）不会返回组件的影子DOM中的节点）

作用域CSS：阴影DOM中定义的CSS的作用域就是它。样式规则不会泄漏，页面样式也不会渗入

简化CSS范围的DOM意味着您可以使用简单的CSS选择器、更通用的id/类名，而不必担心命名冲突

---

它是通过CSS作用域来实现的，引入了一个新的、独立的DOM树，称为Shadow DOM，它将在本地替换最初的DOM，称为Light DOM。

您阅读过关于此主题的文档吗？好的开场白是：我可以问你们问题是否真的是关于“为什么”（意图是什么）而不是“如何”（它是如何做到的）？谢谢，这很有帮助