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

Question

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

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

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

请注意，设置为全局填充的填充不会应用于应用程序覆盖子对象（尽管它应该赢得组件的样式）。

我缺少任何步骤吗？

Answer 1

好的，这很容易混淆，所以我把它放在这里，以防万一有人撞到它。

通过全局作用域样式进行的覆盖仅适用于可继承的CSS属性。 如果您想设置一些不可继承的属性（例如padding-参见此处的完整列表）。

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