是否有可能扩展Polymer元素并重用其风格？

Question

我想基于'纸张按钮'创建一个高级按钮.但是,如果我只是这样做

<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.

Answer 1

要创建自己的元素,使用另一个自定义元素,如纸质按钮,您将需要创建一个包装器.

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

这样,无论何时使用<my-button>Tap Me</my-button>它,都会在我的按钮中包含一个纸质按钮.

一个很好的例子是纸张输入,它基本上是一个包装纸iron-input.看看它,看看属性是如何传递下来的.

Answer 2

您可以通过行为扩展自定义元素,如下所示:

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

行为就像Mixins,所以它们基本上是一个Javascript对象.行为可以定义生命周期回调,声明的属性,默认属性,观察者和侦听器.

我建议你观看这个关于这个主题的精彩视频,它解释了如何使用它:https://www.youtube.com/watch？v = YrlmieL3Z0k