小编JoC*_*oCa的帖子

我创建了一个具有阴影模式“打开”的 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 之外定义的，为什么在这里应用它？