无涯教程网

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

发布于03月28日

我正在构建一个小部件，为了避免css冲突，我将小部件css移到了阴影根中.但即便在那时，母网站的css风格也在影响小部件

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

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

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

我怎样才能避免这种问题？

我是想逃避！重要的是，还有别的办法吗？

推荐答案

默认情况下，可继承的CSS个属性(如font-size)穿透阴影DOM边界.如果要从新的石板开始，请在可继承样式跨越阴影边界时使用all: initial;将其重置为初始值.

在Shadow root 中定义:

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

或者设置CSS个不想受影响的属性

Css相关问答推荐

当optgroup元素不包含任何未使用CSS禁用的选项元素时，如何隐藏它

基于子元素的子元素数量的样式元素

CSS Grid，意想不到的差距

在ReactJS中使用动画在栅格上添加柱

设置ScaleImageButton的样式

两列网格中左列第一个文本正下方的按钮

CSS 中的：not(style) ~ ：not(style) 是什么？

使元素不水平滚动

CSS 网格 - 具有独立可滚动区域的两列布局

SASS 中的计算表达式

为什么左浮动上的清除：左也会影响右浮动，以及如何避免它

css ：：part 伪 Select 器 Chrome 兼容性？

问题定位位置：Tailwindcss 中的绝对元素

flex 容器中的两个滚动块

Bootstrap 类似乎没有任何作用

为什么过渡属性不适用于 box-shadow？

全部：初始与使用 CSS 重置

如何在 CSS 中延迟：hover 效果？

Sass 无效的 CSS 错误：预期的表达式

将 CSS 类添加到 Html.BeginForm()

实用课程推荐

相关教程推荐