無法在媒體查詢中設置陰影dom中的元素樣式

Question

在我的styles/app-theme.html我嘗試更改媒體查詢中paper-drawer-panel的菜單圖標大小。 此元素在index.html中。 由於它在影子dom中，因此我似乎無法訪問它。 我嘗試過：

可能不相關，但是這里是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;
    }
  } 

---

和

  @media (max-width: 600px) {

    :root {
      --iron-icon-height: 6px;
      --iron-icon-width: 50px;
    }
  } 

沒有成功。 有什么建議么？

Answer 1

聚合物目前使用墊片（部分填充料）評估定制屬性。 因此，它們不會自動重新計算。 但是，您可以做的是使用iron-media-query （或直接使用matchMedia ）來了解何時在需要更新的元素上調用updateStyles 。

這是使用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>