将 CSS 注入到 Shadow 根中。然而风格正在受到影响

Question

我正在构建一个小部件，为了避免 css 冲突，我将小部件 css 移到了 Shadow 根目录中。但即使如此，父网站的 CSS 样式也会影响小部件

注意到由于父网站上的这一行而发生了错误。

@media screen and (min-width: 768px) {
  body {
    font-size: 2rem;
  }
}

问题是，为什么父网站中的 body 属性会影响 Shadow root css。Shadow root的目的不就是为了避免这种冲突吗？

我怎样才能避免此类问题？

我试图避免 !important 但还有其他方法吗？

Answer 1

默认情况下，可继承的CSS属性font-size 会刺穿影子 DOM 边界。如果您想从头开始，请在all: initial;可继承样式穿过阴影边界时将其重置为其初始值。

在你的影子根中定义：

<style>
  :host {
     all: initial; /* subsequent properties are reset. */
  }
</style>

或者设置CSS您不希望受到影响的属性