是否可以扩展 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。

Answer 1

要创建您自己的使用另一个自定义元素的元素，例如纸按钮，您需要制作一个包装器。

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

这样，无论何时使用 <my-button>Tap Me</my-button>，它都会真正制作一个包裹在我的按钮中的纸按钮。

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

Answer 2

您可以像这样通过 Behaviors 扩展自定义元素：

<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

是否可以扩展 Polymer 元素并重用其样式？

Is it possible to extend Polymer element and reuse its style?

styles

polymer

element

extends