2008年，我们的团队研究了GWT-一种可以用Java编写Java脚本Web组件的技术。
团队的一位新成员说：
该组件的CSS和页面相互冲突时将出现问题。
事实证明他是正确的。
我今天正在和一位朋友谈论Web Components。我问他如何停止页面的CSS和组件之间的冲突。
他说：
有了Web组件和Shadow DOM，一切都在控制之下。它解决了CSS泄漏的问题。
我的问题是： Web组件和Shadow DOM如何防止跨组件泄漏CSS？
答案 0 :(得分：1)
因为Shadow DOM的设计是 精确 ，以解决开发Web组件时遇到的问题，如Google在introduction to Shadow DOM中所述：
隔离的DOM：组件的DOM是独立的（例如document.querySelector（）不会返回组件的影子DOM中的节点）。
作用域CSS：在影子DOM中定义的CSS作用域。样式规则不会泄漏，页面样式也不会渗入。
简化CSS-作用域DOM意味着您可以使用简单的CSS选择器，更通用的ID /类名，而不必担心命名冲突。
这是通过CSS范围界定实现的，方法是引入一个新的单独的DOM树，称为 Shadow DOM ，该树将在本地替换称为 Light DOM 的初始DOM。