Kann nicht Element in Schatten dom in Medienabfrage

Question

In meinem styles/app-theme.html Ich versuche, die Menü-Symbolgröße von paper-drawer-panel in der Medienabfrage zu ändern. Dieses Element befindet sich in index.html. Da es im Schatten dom ist, kann ich nicht darauf zugreifen. Ich habe versucht, mit:

Wahrscheinlich nicht relevant, aber hier ist die 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; 
    } 
    } 

---

und

@media (max-width: 600px) { 

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

zu keinem Erfolg. Irgendwelche Vorschläge?

Answer 1

Polymer verwendet derzeit eine Unterlegscheibe (ein partielles Polyfill), um benutzerdefinierte Eigenschaften zu bewerten. Als solche werden sie nicht automatisch neu berechnet. Was Sie jedoch tun können, ist iron-media-query (oder verwenden Sie direkt), um zu wissen, wann updateStyles auf den Elementen aufgerufen werden muss, die aktualisiert werden müssen.

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>