Question

以下是样品聚合物元素

<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属性应用于connecting类属性，但是当我使用js将自定义元素的类更改为disconnected时，不会应用新的css属性。实际上，当class属性更改回connecting时，也不会应用相应的css属性。

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

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

Answer 1

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

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

＆＃34;由于对DOM的更改，当前不会重新评估自定义属性样式。可以通过在Polymer元素（或Polymer.updateStyles（）上调用this.updateStyles（）来强制重新评估来更新所有元素样式）。例如，如果将类b添加到上面的x-foo，则作用域必须调用this.updateStyles（）以应用样式。从这一点开始，这会在树上重新计算/应用样式。＆＃34;

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

将自定义元素解析为shady dom树后，不会应用自定义css属性

1 个答案: