0

下面是一个示例聚合物元素

<dom-module id="custom-dialog">
  <style>
      #text{
        width: 400px;
        height: 50px;
        position: relative;
        background: #fff;  
      }
     p{
       position: absolute;
       margin: var(--ui-connectionDialog-text-margin, 5% 30%); 
       font-size: var(--ui-connectionDialog-text-font-size, 18px);
      }
  </style>

  <template>
     <!-- local DOM for your element -->
    <div id = "text" > <p><content></content></p> </div>

 </template>
</dom-module>

以及使用自定义 CSS 设置样式的示例

<style>
   custom-dialog.connecting
   {
      --custom-dialog-text-font-size: 23px;
      --custom-dialog-text-margin: 3.8% 30%;
   }

   custom-dialog.disconnected
   {
        --custom-dialog-text-font-size: 20px;
        --custom-dialog-text-margin: 3.8% 30%;
   }       
</style>
<body>
  <custom-dialog class="connecting">Connecting</custom-dialog>
</body>

我能够将自定义 css 属性与connectingclass 属性一起应用，但是当我使用 js 将自定义元素的类更改为 时disconnected，不会应用新的 css 属性。事实上，当 class 属性改回 时connecting，相应的 css 属性也不会应用。

我怀疑这是因为我的浏览器在 shady-dom 模式下运行，并且在多边形填充中存在间隙。

我很想直接将 css 属性应用到<p>shady-dom 中的元素上，但它想知道是否有适当的方法来处理这个问题。

4

1 回答 1

0

根据聚合物文档“仅应用在创建时与元素匹配的规则。任何更新变量值的动态更改都不会自动应用。”

https://www.polymer-project.org/1.0/docs/devguide/styling.html

“由于对 DOM 的更改，当前不会重新评估自定义属性样式。可以通过在 Polymer 元素上调用 this.updateStyles() 来强制重新评估（或 Polymer.updateStyles() 以更新所有元素样式“

..最好解释您的问题，这是您问题的官方解决方法。您应该在应用断开连接的类后调用 this.updateStyles()。

于 2015-10-01T05:54:55.920 回答