css - Can't style element in shadow dom in media query -

in styles/app-theme.html trying change menu icon size of paper-drawer-panel in media query. element in index.html. since in shadow dom, can't seem access it. tried with:

probably not relevant, here index.html:

  <template is="dom-bind" id="app">     <paper-drawer-panel force-narrow="true">       <div drawer>         <drawer-custom></drawer-custom>       </div>       <div main>         <div id="header-v-center">           <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle> 

---

  @media (max-width: 600px) {     iron-icon#icon::shadow {       height: 6px;       width: 5px;     }   }  

---

and

  @media (max-width: 600px) {      :root {       --iron-icon-height: 6px;       --iron-icon-width: 50px;     }   }  

to no success. suggestions?

polymer uses shim (a partial polyfill) evaluate custom properties. such, aren't automatically recalculated. can do, however, use iron-media-query (or directly use matchmedia) know when call updatestyles on element(s) need updating.

here's example of using updatestyles:

polymer({        is: 'seed-element',        properties: {        largescreen: {          type: boolean,          observer: '_largescreenchanged'        }      },            _largescreenchanged: function(newvalue) {        this.updatestyles({          '--h1-color': (newvalue ? 'red' : 'blue')        });      }    });

<dom-module id="seed-element">    <template>      <style>        h1 {          color: var(--h1-color, red);        }      </style>            <h1>header</h1>            <iron-media-query query="(max-width: 600px)" query-matches="{{largescreen}}"></iron-media-query>    </template>    </dom-module>    <seed-element id="topmenu"></seed-element>