css - 外部样式不会覆盖 Shadow DOM 样式

Question

我正在尝试设置 <app-drawer> 的样式component并给它背景色。在其文档中，app-drawer 提供了一个 custom variable available影响应用程序抽屉内容容器 ( #contentContainer )。

app-drawer {
        box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.5);
        --app-drawer-content-container: {
            background-color: orange !important;
        };
    }

这些样式会处理，但不会覆盖 native component styles . Here's what comes up for me in the browser .

Outside styles always win over styles defined in shadow DOM - Google Developers

我正在从所有者文档中导入元素。

<!--index.html-->
<link rel="import" href="../bower_components/app-layout/app-layout.html">

<style>
    app-drawer {
        ...
    }
    ...
</style>
<app-drawer-layout>
    <app-drawer slot="drawer">
        <app-toolbar>Main Title</app-toolbar>
    </app-drawer>
</app-drawer-layout>

有人能弄清楚这里发生了什么吗？

Answer 1

尝试将 box-shadow 放在 --app-drawer-content-container 中。这对我有用:

app-drawer {
  z-index: 3;
  --app-drawer-content-container: {
    box-shadow: 1px 0 2px 1px rgba(0,0,0,0.18);
    background-color: orange;
  }
}