Web Components 和 Shadow DOM 如何防止跨组件泄漏 CSS？答案

【问题标题】：How do Web Components and the Shadow DOM prevent leaky CSS across components?Web Components 和 Shadow DOM 如何防止跨组件泄漏 CSS？
【发布时间】：2019-05-09 12:15:39
【问题描述】：

2008 年，我们的团队调查了GWT - 一种用 Java 编写可编译的 Javascript Web 组件的技术。

团队的一位新成员说：

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

事实证明他是对的。

我今天和一位朋友谈论Web Components。我问他如何阻止页面的 CSS 和组件之间的冲突。

他说：

借助 Web Components 和 Shadow DOM，一切尽在掌控之中。它解决了泄漏 CSS 的问题。

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

【问题讨论】：

您是否阅读过有关该主题的文档？好的入门是：dannymoerkerke.com/blog/…
我可以问你问题是否真的是关于“为什么”（意图是什么）而不是“如何”（它是如何做到的）？
谢谢，很有帮助

标签： javascript css web-component shadow-dom

【解决方案1】：

因为 Shadow DOM 旨在精确解决开发 Web 组件时遇到的问题，正如 Google 在 introduction to Shadow DOM 中所述：

隔离 DOM：组件的 DOM 是自包含的（例如 document.querySelector() 不会返回组件影子 DOM 中的节点）。

Scoped CSS：在 shadow DOM 中定义的 CSS 的作用域是它。样式规则不会泄漏，页面样式不会渗入。

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

它是通过 CSS Scoping 实现的，引入了一个名为 Shadow DOM 的新的独立 DOM 树，它将在本地替换名为 Light DOM 的初始 DOM。

【讨论】：