The issue is that the button you are trying to style is inside the shadow root of your teste-view. You can see in the developer console that there is an expanded shadow root that contains the button.
CSS styles do not penetrate shadow roots, and thus don’t affect your button. There are a few possible solutions.
Refactor your shared-styles.html to look like this
<dom-module id="shared-styles">
<template>
<style>
.bgg {
background-color: green;
}
</style>
</template>
</dom-module>
<custom-style>
<style include="shared-styles">
/* You can put styles here that you don't want to be included in shadow roots */
</style>
</custom-style>
And then also include it in your teste-view as such
Erik Lumme:
The issue is that the button you are trying to style is inside the shadow root of your teste-view. You can see in the developer console that there is an expanded shadow root that contains the button.
CSS styles do not penetrate shadow roots, and thus don’t affect your button. There are a few possible solutions.
Refactor your shared-styles.html to look like this
<dom-module id="shared-styles">
<template>
<style>
.bgg {
background-color: green;
}
</style>
</template>
</dom-module>
<custom-style>
<style include="shared-styles">
/* You can put styles here that you don't want to be included in shadow roots */
</style>
</custom-style>
And then also include it in your teste-view as such