如何用Polymer重写本机HTML输入元素？

Question

我想用Polymer重写<input type="number">元素，以便我可以<input is="number-input">并以某种方式设置样式，使其在不同浏览器上的外观和行为相同。

这就是我现在所处的位置：

<link rel="import" href="../polymer/polymer.html">
<polymer-element name="number-input" extends="input" attributes="value">
  <script>
    Polymer('number-input', {
      valueChanged: function(){
        console.log(this.value)
      }
    });
  </script>
</polymer-element>

...并按<input is="number-input">使用它，但它不会触发valueChanged函数。

我做错了什么？

Answer 1

Teltrik最近发表了一篇关于阴影dom样式输入的文章非常有趣：http://developer.telerik.com/featured/comprehensive-guide-styling-file-inputs/

在您的情况下，您正确地做了一切。但问题是，input已经具有.value属性。您正在尝试覆盖创建不可预测行为的本机属性。第二个问题是Object.observe()无法观察元素的原生属性。例如，如果您添加了hidden属性，则永远不会调用hiddenChanged。同样适用于title和titleChanged。