メディアクエリでシャドードームの要素をスタイルできない

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>