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

Question

在我的styles/app-theme.html中，我試圖在媒體查詢中更改paper-drawer-panel的菜單圖標大小。這個元素在index.html中。由於它在陰影中，我似乎無法訪問它。我試着用：

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

聚合物當前使用墊片（部分填充）來評估自定義屬性。因此，它們不會自動重新計算。但是，您可以執行的操作是使用​​（或直接使用matchMedia）知道何時需要更新的元素上需要調用updateStyles。

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>