Ist es möglich, Polymerelement zu erweitern und seinen Stil wiederzuverwenden?

Question

Ich möchte eine erweiterte Schaltfläche basierend auf "Papier-Taste" erstellen. Wenn ich dies jedoch einfach

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

dann Knopf verliert alle seine Stile. Mache ich etwas falsch?

Ich verwende Polymer 1.0.

Answer 1

Um ein eigenes Element zu erstellen, das ein anderes benutzerdefiniertes Element wie den Papier-Button verwendet, sollten Sie einen Wrapper erstellen.

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

Auf diese Weise, wenn Sie <my-button>Tap Me</my-button> es verwenden wird wirklich eine Papier-Taste in my-Taste eingewickelt werden. Ein gutes Beispiel ist paper-input, die im Grunde ein Wrapper für iron-input ist. Sieh es dir an und sieh dir an, wie die Eigenschaften weitergegeben werden.

Answer 2

Sie können benutzerdefinierte Elemente durch Behaviors wie folgt verlaufen:

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

Behaviors sind wie Mixins so sind sie, im Grunde ein Objekt Javascript. Ein Verhalten kann Lebenszyklusrückrufe, deklarierte Eigenschaften, Standardattribute, Beobachter und Listener definieren.

Ich schlage vor, dieses große Video zu diesem Thema zu sehen, die sehr gut erklären, wie es zu benutzen: https://www.youtube.com/watch?v=YrlmieL3Z0k