javascript - 全局样式不会覆盖 Shadow dom 样式

Question

根据https://developers.google.com/web/fundamentals/web-components/shadowdom#stylefromoutside :

Outside styles always win over styles defined in shadow DOM. For example, if the user writes the selector fancy-tabs { width: 500px; }, it will trump the component's rule: :host { width: 650px;}.

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

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

在此处查看完整示例:http://plnkr.co/edit/YQOmtxSA9AThCcNmrEJc?p=preview

请注意，设置为全局的填充不会应用于应用程序覆盖子级(尽管它应该胜过组件的样式)。

我是否遗漏了任何步骤？

Answer 1

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

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

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