Question

我正在尝试设置<app-drawer> component的样式并为其指定背景颜色。在其文档中，app-drawer提供custom variable available来影响app抽屉内容容器（#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;
  }
}

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

1 个答案: