如何用Polymer重写原生HTML输入元素?

Question

我想用聚合物重写<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属性。你试图重写native属性这会产生不可预测的行为。第二个问题是Object.observe()不能观察元素的本地属性。例如，如果添加了hidden属性，则永远不会调用hiddenChanged。title和titleChanged也一样。