为什么这个全局定义的 CSS 规则会影响 Shadow DOM 内部的样式？

Question

我创建了一个具有阴影模式“打开”的 Web 组件，其使用方式如下：

<scu-switch checked="true" value="switch1">
  <span id="scu-switch-label">Switch On</span>
</scu-switch>

看起来像这样：

然后我使用以下全局 CSS 将按钮添加到网页：

<scu-switch checked="true" value="switch1">
  <span id="scu-switch-label">Switch On</span>
</scu-switch>

现在按钮样式已损坏：

当我检查按钮时，我可以看到，全局样式已应用于影子根 内部的范围（并注意它不是插槽内容的一部分）。

Shadow DOM 应该将样式与网页的其余部分隔离。text-align: center尽管它是在 Shadow DOM 之外定义的，为什么在这里应用它？

Answer 1

Web 组件中 Shadow DOM 的一大特点是样式被封装到组件中 - 您可以设计组件的样式，而不必担心任何说明符（id、类等）冲突或样式“泄漏”到其他元素这一页。

这通常会导致人们相信相反的情况是正确的 - 组件外部的样式不会跨越 Shadow 边界并“泄漏”到您的组件中。然而这只是部分正确。

虽然说明符不会泄漏到您的组件中（例如，应用于组件外部样式规则中的 p 元素的颜色不会影响 Shadow DOM 中的任何 p 元素，但该规则将应用于您的 Light DOM，或者开槽内容），

应用于包含组件的任何元素的可继承样式将同时应用于 Shadow 和 Light DOM。

来源： https ://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/