Polymer 中 'required' 属性的动态绑定不影响样式

Question

我在表单中使用纸张输入 Polymer 元素并动态更改其 'required' 属性，如下所示：

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

属性绑定在 'required' 属性被正确设置并在表单中按预期行为的意义上运作良好，但问题是当设置属性时元素的样式不正确。

另一方面，当设置 'required' 属性而不绑定时，样式被正确应用：

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

在 'disabled' 属性上以相同方式完成的动态绑定按预期工作。为了更好地理解，我创建了 jsfiddle 来说明问题：

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

我也尝试过以命令方式更改属性，但结果是一样的 - 样式没有改变。有什么想法可以解决这个问题吗？

Answer 1

在您的 CSS 中，您使用的是 Polymer 的自定义属性垫片。例如这里：--paper-input-container-label 不幸的是，这些自定义 CSS 属性不会在属性更改时自动重新评估。以下是 documentation 对这个话题的看法：

Polymer's custom property shim evaluates and applies custom property values once at element creation time. In order to have an element (and its subtree) re- evaluate custom property values due to dynamic changes such as application of CSS classes, etc., call the updateStyles method on the element. To update all elements on the page, you can also call Polymer.updateStyles.

所以基本上你需要手动观察 isRequired 的变化并在你的元素上调用 this.updateStyles 或 Polymer.updateStyles。

Polymer 中 'required' 属性的动态绑定不影响样式

Dynamic binding of 'required' attribute in Polymer does not affect style

binding

attributes

required

polymer