无法在媒体查询中的阴影dom中设置样式元素 [英] Can't style element in shadow dom in media query

问题描述

在我的 styles / app-theme.html 中，我正在尝试更改纸张抽屉面板在媒体查询。此元素位于index.html中。因为它是在影子dom，我似乎不能访问它。我试过：

可能不相关，但这里是index.html：

 code>< template is =dom-bindid =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-toggleicon =menupaper-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; 
} 
} 
  

无法成功。有什么建议么？

解决方案

Polymer目前使用填充（部分填充）来评估自定义属性。因此，它们不会自动重新计算。不过，您可以使用铁媒体查询（或直接使用 matchMedia ）知道何时调用< a href =https://www.polymer-project.org/1.0/api/#Polymer.Base:method-updateStyles =nofollow> updateStyles 上需要更新的元素。

以下是使用updateStyles的示例

a>：

  Polymer（{is：'seed-element'，properties：{largeScreen：{type：Boolean，observer：'_largeScreenChanged' }}，_largeScreenChanged：function（newValue）{this.updateStyles（{'--h1-color'：（newValue？ '红蓝'）      }）; }}）;  

 < dom-module id =种子元件> < 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>  

/ div>

In my styles/app-theme.html I am trying to change the menu icon size of paper-drawer-panel in the media query. This element is in index.html. Since it is in the shadow dom, I can't seem to access it. I tried with:

Probably not relevant, but here is the 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;
    }
  } 

---

and

  @media (max-width: 600px) {

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

To no success. Any suggestions?

解决方案

Polymer currently uses a shim (a partial polyfill) to evaluate custom properties. As such, they aren't automatically recalculated. What you can do, however, is use iron-media-query (or directly use matchMedia) to know when to call updateStyles on the element(s) that need updating.

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>

这篇关于无法在媒体查询中的阴影dom中设置样式元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！