Can't style element in shadow dom in media query

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

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>