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

Question

I would like to create an advanced button based on 'paper-button'. However, if I simply do this

<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 button loses all its styles. Am I doing something wrong?

I am using Polymer 1.0.

Answer 1

To create your own element that uses another custom element, like paper-button, you'll want to make a wrapper.

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

This way whenever you use <my-button>Tap Me</my-button> it will really make a paper-button wrapped in my-button.

A good example is paper-input, which is basically a wrapper for iron-input. Take a look at it and see how the properties are passed down.

Answer 2

You can extend custom elements through Behaviors like this:

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

Behaviors are like Mixins so they are, basically, a Javascript object. A behavior can define lifecycle callbacks, declared properties, default attributes, observers, and listeners.

I suggest you to watch this great video on this topic that explain very well how to use it: https://www.youtube.com/watch?v=YrlmieL3Z0k