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

Question

我创建了一个使用阴影模式“open”的Web组件，用法如下：

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

效果如下：

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

  text-align: center;

现在按钮样式出现了问题：

当我检查此按钮时，我可以看到全局样式被应用到阴影根节点内的中（请注意它不是插槽内容的一部分）

阴影DOM应该将样式与网页其余部分隔离开来。为什么这里会应用text-align: center，即使它在Shadow DOM之外定义了呢？

- JoCa

---

你能否创建以上代码的 CodePen 并分享链接？ - Nikhil

Answer 1

Web组件中Shadow DOM的一个重要特性是样式被封装在组件内部 - 您可以为组件设置样式，而不必担心任何指定符（id、class等）冲突或样式泄漏到页面上的其他元素。

这经常导致人们认为反过来也是正确的 - 组件外部的样式不会跨越Shadow边界并“泄漏”到您的组件中。然而，这只有部分正确。

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

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

来源: https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ | 为什么我的 Web 组件会继承样式？

- Danny '365CSI' Engelman