title: Shadow DOM CSS Styling from outside is not working in Google Chrome
body: <p>I am using <code>polymer</code>'s <code>paper-action-dialog</code> and <code>paper-button</code> 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 <code>CSS</code> styles in <code>shadow DOM</code> notation. These styles are working fine in Firefox browser but not behaving correctly in <code>Google-chrome</code> browser. What should I do in order to get that work in chrome.?</p>
  
  <p>Mark up</p>
  
  <pre><code>&lt;paper-action-dialog class="ask" backdrop autoCloseDisabled=true heading="Heading!"&gt;
    &lt;p&gt;This is the sample paragraph.&lt;/p&gt;
    &lt;paper-button  autofocus class="test" affirmative&gt;Edit&lt;/paper-button&gt;
    &lt;paper-button  autofocus class="test" affirmative&gt;OK&lt;/paper-button&gt;
  &lt;/paper-action-dialog&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>paper-action-dialog::shadow paper-button.test{
              font-size: small;
              height: 100%;
              padding-top: 5px;
              width: 100%;
              margin: 0 0;
  }
  </code></pre>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>Answer lies in comment:</p>
  
  <p>Selector should be <code>overlay-host::shadow paper-button.test</code></p>