title: Can't style element in shadow dom in media query
body: <p>In my <code>styles/app-theme.html</code> I am trying to change the menu icon size of <code>paper-drawer-panel</code> in the media query. This element is in index.html. Since it is in the shadow dom, I can't seem to access it. I tried with:</p>
  
  <p>Probably not relevant, but here is the index.html:</p>
  
  <pre><code>  &lt;template is="dom-bind" id="app"&gt;
      &lt;paper-drawer-panel force-narrow="true"&gt;
        &lt;div drawer&gt;
          &lt;drawer-custom&gt;&lt;/drawer-custom&gt;
        &lt;/div&gt;
        &lt;div main&gt;
          &lt;div id="header-v-center"&gt;
            &lt;paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>  @media (max-width: 600px) {
      iron-icon#icon::shadow {
        height: 6px;
        width: 5px;
      }
    } 
  </code></pre>
  
  <hr>
  
  <p>and</p>
  
  <pre><code>  @media (max-width: 600px) {
  
      :root {
        --iron-icon-height: 6px;
        --iron-icon-width: 50px;
      }
    } 
  </code></pre>
  
  <p>To no success. Any suggestions? </p>