I am currently utilizing polymer's paper-action-dialog and paper-button components on my webpage. Within the paper-action-dialog element, there are two paper-buttons. I am looking to style these paper-buttons externally (in the main HTML file). I have written my CSS styles using shadow DOM notation. While these styles are functioning as expected in Firefox, they are not displaying correctly in the Google Chrome browser. What steps can I take to ensure the styling works in Chrome?
Markup
<paper-action-dialog class="ask" backdrop autoCloseDisabled=true heading="Heading!">
<p>This is a sample paragraph.</p>
<paper-button autofocus class="test" affirmative>Edit</paper-button>
<paper-button autofocus class="test" affirmative>OK</paper-button>
</paper-action-dialog>
CSS
paper-action-dialog::shadow paper-button.test{
font-size: small;
height: 100%;
padding-top: 5px;
width: 100%;
margin: 0 0;
}
EDIT:
The solution can be found in the comment below:
The correct selector should be
overlay-host::shadow paper-button.test