Внешние стили не перекрывают стили Shadow DOM - PullRequest
Новая
       37

Внешние стили не перекрывают стили Shadow DOM

0 голосов
/ 04 мая 2018

Я пытаюсь стилизовать <app-drawer> компонент и задать ему цвет фона. В своей документации app-box предлагает пользовательскую переменную , доступную , которая влияет на контейнер содержимого ящика приложения (#contentContainer). 

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

Эти стили работают, но они не переопределяют собственные стили компонентов . Вот что мне подходит в браузере .

Внешние стили всегда побеждают стили, определенные в теневом 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>

Кто-нибудь может понять, что здесь происходит?

1 Ответ

0 голосов
/ 04 мая 2018

Попробуйте положить 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;
  }
}
...