能否扩展Polymer元素并重用其样式？

Question

我想基于 "paper-button" 创建一个高级按钮。但是，如果我只是这样做

<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="my-better-button">
  <script>
    Polymer({
      is: 'my-better-button',
      extends: 'paper-button'
    });
  </script>
</dom-module>

然后按钮失去了所有样式。我做错了什么吗？

我正在使用Polymer 1.0。

- ironic

---

目前只能扩展原生 HTML 元素，无法扩展 Polymer 元素。未来版本可能会支持此功能。 - Ben Thomas

Answer 1

要创建一个使用其他自定义元素（例如paper-button）的自定义元素，您需要创建一个包装器。

<dom-module id="my-button">
  <template>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</dom-module>

这样，每当您使用<my-button>Tap Me</my-button>时，它将真正生成一个包装在my-button中的paper-button。

一个很好的例子是paper-input，它基本上是iron-input的包装器。看一下它，看看属性是如何传递的。

- Kevin Ashcraft

Answer 2

您可以通过像这样的行为来扩展自定义元素：

<dom-module id="my-better-button">
  <script>
    Polymer({
      is: 'my-better-button',
      behaviors: [betterButton]
    });
  </script>
</dom-module>

Behaviors类似于Mixin，因此它们基本上是JavaScript对象。行为可以定义生命周期回调、声明属性、默认属性、观察者和监听器。

我建议您观看这个很棒的视频，它非常好地解释了如何使用： https://www.youtube.com/watch?v=YrlmieL3Z0k

- Granze