È possibile estendere l'elemento Polimero e riutilizzarne lo stile?

Question

Vorrei creare un pulsante avanzato basato su "pulsante carta". Tuttavia, se lo faccio semplicemente

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

quindi il bottone perde tutti i suoi stili. Sto facendo qualcosa di sbagliato?

Sto usando Polymer 1.0.

Answer 1

Per creare il proprio elemento che utilizza un altro elemento personalizzato, come il pulsante di carta, è consigliabile creare un wrapper.

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

In questo modo ogni volta che si utilizza <my-button>Tap Me</my-button> sarà davvero fare una carta tasto avvolto nel mio pulsante.

Un buon esempio è paper-input, che è fondamentalmente un wrapper per iron-input. Dai un'occhiata e guarda come vengono tramandate le proprietà.

Answer 2

È possibile estendere gli elementi personalizzati attraverso Behaviors come questo:

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

comportamenti sono come mixin in modo che siano, in fondo, un oggetto JavaScript. Un comportamento può definire callback del ciclo di vita, proprietà dichiarate, attributi predefiniti, osservatori e listener.

vi consiglio di guardare questo bellissimo video su questo argomento che spiegano molto bene come usarlo: https://www.youtube.com/watch?v=YrlmieL3Z0k