在媒体查询中不能在阴影dom中设置样式元素

时间:2016-04-22 01:12:12

标签: css polymer polymer-1.0

在我的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;
    }
  } 

没有成功。有什么建议?

1 个答案:

答案 0 :(得分:3)

Polymer目前使用垫片(部分polyfill)来评估自定义属性。因此,它们不会自动重新计算。但是,您可以使用iron-media-query(或直接使用matchMedia)来了解何时在需要更新的元素上调用updateStyles

Here's an example of using updateStyles

&#13;
&#13;
Polymer({

    is: 'seed-element',

    properties: {
      largeScreen: {
        type: Boolean,
        observer: '_largeScreenChanged'
      }
    },
    
    _largeScreenChanged: function(newValue) {
      this.updateStyles({
        '--h1-color': (newValue ? 'red' : 'blue')
      });
    }
  });
&#13;
<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>
&#13;
&#13;
&#13;