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

Question

In my styles/app-theme.html I am trying to change the menu icon size of paper-drawer-panel 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:
Probably not relevant, but here is the 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. Any suggestions?

Answer 1

Polymer currently uses a shim (a partial polyfill) to evaluate custom properties. As such, they aren't automatically recalculated. What you can do, however, is use iron-media-query (or directly use matchMedia) to know when to call updateStyles on the element(s) that need updating.
Here's an 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>