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

Question

我正在构建一个小部件，为了避免 css 冲突，我将小部件 css 移到了 Shadow 根目录中。但是父网站 css 样式甚至会影响小部件

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

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

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

如何避免此类问题？

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

Answer 1

仅仅因为您使用的是 Web 组件并不意味着它的样式是完全隔离的。

CSS 页面规则始终应用于页面上的 Web 组件。

CSS-Tricks 上有一篇关于此主题的好文章：https://css-tricks.com/styling-a-web-component/

Answer 2

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

在你的影子根中定义：

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

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

Injected CSS into the Shadow root. Yet styles are getting affected