Shadow DOM CSS Styling from outside is not working in Google Chrome

Question

I am using polymer 's paper-action-dialog and paper-button in my web page. There are two paper-buttons in a paper-action-dialog. I want to style those paper-buttons from outside (main html). I have written CSS styles in shadow DOM notation. These styles are working fine in Firefox browser but not behaving correctly in Google-chrome browser. What should I do in order to get that work in chrome.?

Mark up

<paper-action-dialog class="ask" backdrop autoCloseDisabled=true heading="Heading!">
  <p>This is the 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 :

Answer lies in comment:

Selector should be overlay-host::shadow paper-button.test

Answer 1

You should investigate the DOM ( F12 or context menu inspect element). The HTML for the actual dialog is added somewhere to the body tag not within the <paper-action-dialog> . You have to adapt the selectors accordingly.