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

编程问答 2022-05-03

问题描述

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

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

看起来像这样：

Html Toogle Button

我将按钮添加到具有以下全局 CSS 的网页：

  text-align: center;

现在按钮样式坏了：

enter image description here

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

Developer Tools

shadow DOM 应该从网页的其余部分isolate style。 为什么这个 text-align: center 被应用在这里，即使它是在 Shadow DOM 之外定义的？

解决方法

Shadow DOM 在 Web Components 中的一大特色是样式被封装到组件中——您可以为组件设置样式，而无需担心任何说明符（id、class 等）冲突或样式 '泄漏' 到页面上的其他元素。

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

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

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

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

htmlshadow-domtext-alignweb-component