是否有可能扩展聚合物元素并重用其风格?

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>

then按钮失去它所有的样式。我做错了什么吗?

我使用的是Polymer 1.0

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-input，它基本上是iron-input的包装器。看一下它，看看属性是如何传递的

Answer 2

您可以像这样通过behavior扩展自定义元素:

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

行为就像mixin，所以它们基本上是一个Javascript对象。行为可以定义生命周期回调、声明的属性、默认属性、观察器和监听器。

我建议你看这个关于这个话题的视频，它很好地解释了如何使用它:https://www.youtube.com/watch?v=YrlmieL3Z0k