Question

我在表格中使用纸张输入聚合物元素并更改其所需的＆＃39;动态属性，如下所示：

<paper-input required$="[[isRequired]]" label="Required attr. bound"></paper-input>

对于必需的输入，我定义了稍微不同的样式，使它们在页面上更加明显，如下所示：

  paper-input[required] {
    --paper-input-container-label: {
      color: green;
    }
    ;
    --paper-input-container-label-floating: {
      font-weight: bold;
      color: green;
    }
    ;
    --paper-input-container-underline: {
      border-bottom: 2px solid green;
    }
  }

属性绑定在某种意义上很有效，并且需要＆＃39;属性已正确设置并在表单中按预期运行，但问题是在设置属性时元素未正确设置样式。

另一方面，当设置＆＃39; required＆＃39;没有绑定的属性，正确应用了样式：

<paper-input required label="Required set directly"></paper-input>

动态绑定以同样方式在“禁用”状态下完成属性按预期工作。为了更好地理解，我创建了jsfiddle来说明问题：

https://jsfiddle.net/dstefanox/h6xz9usn/3/

我也尝试以命令式方式更改属性，但结果是相同的 - 样式不会改变。任何想法如何解决这个问题？

Answer 1

在CSS中，您正在使用Polymer的自定义属性垫片。例如：--paper-input-container-label 遗憾的是，当属性更改时，不会自动重新评估这些自定义CSS属性。以下是documentation对此主题的评论：

Polymer的自定义属性填充程序在元素创建时评估并应用自定义属性值一次。为了使元素（及其子树）由于动态更改（例如CSS类的应用等）而重新评估自定义属性值，请在元素上调用updateStyles方法。要更新页面上的所有元素，您还可以致电Polymer.updateStyles。

基本上，您需要手动监视isRequired的更改，并在您的元素或this.updateStyles上调用Polymer.updateStyles。

动态绑定＆＃39;必需＆＃39; Polymer中的属性不会影响样式

1 个答案: