title: How to set :host {} based on media query in Polymer?
body: <p>I have to set height on the <code>:root</code> element, or else I will not get the viewport size that I want with a scrollbar. However, I only want to set <code>height: calc(100% - 130px);</code> when the viewport is less than 900px. </p>
  
  <p>How can I do this since I can not use <code>@media</code> query? I tried this to no success:</p>
  
  <pre><code>&lt;template&gt;
      &lt;style include="iron-flex iron-flex-alignment"&gt;
       :host[show] {
         background-color: var(--pink-color);
         width: 100%;
         overflow-x: hidden;
         overflow-y: auto;
         outline: none;
         display: flex;
       }
  
       :host[smallScreen] {
         height: calc(100% - 130px);
       }
  
      &lt;div hidden$="{{!show}}"&gt;
        &lt;iron-media-query query="(max-width: 899px)"
           query-matches="{{smallScreen}}"&gt;&lt;/iron-media-query&gt;
  ...
   &lt;script&gt;
      Polymer({
        is: 'video-selection',
        properties: {
          show: {
            type: Boolean,
            value: true,
            reflectToAttribute: true
          },
          smallScreen: {
            type: Boolean,
            value: false,
            reflectToAttribute: true
          }
        },
  </code></pre>