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

Question

我创建了一个带有阴影模式的网络组件 'open'，它的用法如下：

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

看起来像这样：

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

  text-align: center;

现在按钮样式已损坏：

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

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

Answer 1

One of the great features of the Shadow DOM in Web Components is that styles are encapsulated to the component - you can style your component without worrying about any specifier (id, class, etc.) conflicts or styles 'leaking out' to other elements on the page.

This often leads to the belief that the reverse is true - that styles outside of the component won't cross the Shadow boundary and 'leak in' to your component. However this is only partly true.

While specifiers do not leak in to your component (e.g. a color applied to an p element in a style rule outside of your component won't effect any p elements in your Shadow DOM, although the rule will be applied to your Light DOM, or slotted content),

inheritable styles applied to any elements containing your component will be applied to both your Shadow and Light DOM.

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

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

Why does this globally defined css rule affect styling inside of the shadow DOM?

html

css

web-component

shadow-dom

text-align