全局样式不会覆盖阴影 dom 样式答案

【问题标题】：Global Styles do not override shadow dom style全局样式不会覆盖阴影 dom 样式
【发布时间】：2019-02-20 10:32:46
【问题描述】：

外部样式总是胜过 shadow DOM 中定义的样式。为了例如，如果用户编写选择器 fancy-tabs { width: 500px; }, 它将胜过组件的规则：:host { width: 650px;}。

这在我的示例中似乎不起作用。我已经设置了一个应用程序覆盖组件。在里面我有一个 .child 类的 div。根据上述来源，我希望孩子在全局范围内设置填充：

app-overlay .child {
  padding: 0 25%;
}

请注意，设置为全局的 padding 不会应用于 app-overlay 子项（尽管它应该赢得组件的样式）。

有没有我遗漏的步骤？

【问题讨论】：

【解决方案1】：

好的，这只是令人困惑，所以我把它放在这里以防有人撞到它。

通过全局范围样式覆盖仅适用于可继承的 CSS 属性。如果您想设置一些不可继承的属性（如填充 - 请参阅完整列表 here）。

所以我猜想对不可继承属性执行此操作的唯一方法是通过模板（例如调用文件）或 css 变量注入 CSS。

【讨论】：

你也试过padding: inherit和!important吗？
关于 !important - 这是 shadow DOM 保护我们的组件免受攻击的主要内容之一。关于继承 - 你不能继承填充 - 它是不可继承的 :) 只是为了确保 - 我在我的代码中检查了它。您可以在问题中的 plnkr 中尝试。