So erweitern Sie mehrere Elemente mit Polymer

Question

Ich weiß, es gibt diese Frage auf multiple inheritance/composition. Es scheint jedoch so zu sein, dass diese Frage mehr dazu dient, die Funktionalität von mehreren vorhandenen Elementen in anderen Elementen wiederzuverwenden. Und die Lösung dafür sind natürlich Mixins.

Ich würde gerne wissen, wie ich tatsächlich vorhandene Elemente "dekorieren" kann, ohne wirklich Funktionalität von ihnen zu leihen. Wir wissen, dass es diese extends Eigenschaft gibt, die verwendet werden kann, um ein vorhandenes Element mit Polymer zu erweitern.

So machen Sie eine normale <button> verhalten sich wie eine mega-button ist so einfach wie das Anfügen <button is="mega-button"> und schreiben Sie eine Komponente dafür. Aber es stellt sich heraus, dass es nicht möglich ist, mehrere Elemente zu extend. So etwas wie extends="foo bar" funktioniert nicht. Was, wenn ich eine Webkomponente erstellen möchte, die tatsächlich auf verschiedene Elemente angewendet werden kann?

Zum Beispiel möchte ich nicht nur <button> Elemente mit mega-button verlängern, aber wahrscheinlich auch ein <a> Element, so dass es so aussieht und verhält sich wie ein zu mega-button?

Der Mixin-Ansatz hilft hier nicht wirklich (soweit ich es verstehe), weil sie nichts anderes tun, als eine gemeinsame Logik für verschiedene Web-Komponenten bereitzustellen. Das bedeutet, dass Sie mehrere Komponenten erstellen und die Logik (die in einem Mixin gepackt wurde) wiederverwenden.

Was ich brauche, ist ein Weg, eine Web-Komponente zu erstellen, die Elemente mehrere angewendet werden kann.

Irgendeine Idee, wie man das löst?

UPDATE

Addy antwortete mit einigen Ansätzen, dass die Verwendung Fall zu behandeln. Hier ist ein Follow-up Frage basiert auf einem Ansatz

How to find out what element is going to be extended, while registering my own in Polymer

und ein anderer auf Is it possible to share mixins across web components (and imports) in Polymer?

UPDATE 2

Ich habe einen Artikel geschrieben und kommt zu dem Schluss, meine Erfahrungen und Erkenntnisse über die Vererbung und Zusammensetzung mit Polymer: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

Answer 1

Wenn Sie nur einen einzigen Import haben, müssen die suppo hat rt für mehrere Elemente angewendet wird, Ihr Element könnte mehrere Elementdefinitionen enthalten, die nicht von Vorteil Polymer.mixin um begünstigt werden kann oder Funktionalität zwischen Ihre Dekoration Elemente zu teilen.

So pascal-decorator.html könnte Polymer Elementdefinitionen für <pascal-span> enthalten und <pascal-button>, von denen beide mixin Logik von einem Objekt innerhalb pascal-decorator.html definiert. Sie können dann <button is="pascal-button"> und <button is="pascal-span"> tun, während die Logik dafür im selben Import bleibt.

Die Alternative (wenn Sie das alles nur in einem benutzerdefinierten Element machen wollen, welches IMO dies weniger sauber macht) besteht darin, etwas gegen den Typ des Elements zu prüfen, das erweitert werden soll Sie linked to oder durch Überprüfung als Teil Ihrer Element Registrierung Prozess. Im Allgemeinen bevorzuge ich persönlich, herauszufinden, welche Logik ich möglicherweise zwischen Elementen, die dekoriert werden könnten, teilen muss, isoliere diese Funktionalität in ein Element und importiere sie dann in dedizierte Elemente, die Wissen über das Tag haben (zB <addy-button> , <addy-video> usw.).