自定义元素解析为阴影 dom 树后，不应用自定义 css 属性答案

【问题标题】：custom css properties are not applied after custom elements are resolved into shady dom tree自定义元素解析为阴影 dom 树后，不应用自定义 css 属性
【发布时间】：2015-10-01 05:37:17
【问题描述】：

以下是聚合物元素示例

<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>

我可以使用connecting类属性应用自定义css属性，但是当我使用js将自定义元素的类更改为disconnected时，没有应用新的css属性。实际上当class属性改回connecting时，相应的css属性也没有应用。

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

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

【问题讨论】：

标签： css polymer shady-dom

【解决方案1】：

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

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

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

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

【讨论】：