Der beste Weg, mit Polymerelement Erbe umgehen

Question

ein Element wie Gegeben:

<polymer-element name="custom-element"> 
    <template> 
     <style> 
      #container { 
       color: red; 
      } 
     </style> 
     <div id="container" on-click="{{clickContainer}}"> 
      ... lots of other stuff here ... 
     </div> 
    </template> 
    <script> 
     Polymer('custom-element', { 
      clickContainer: function() { 

      } 
     }); 
    </script> 
</polymer-element> 

Ich mag würde ein weiteres Element haben, dass die ersten Packungen:

<polymer-element name="my-custom-element" extends="custom-element"> 
    <!-- extra styling --> 
    <script> 
     Polymer('my-custom-element', { 
      clickContainer: function() { 
       this.super(); 
      } 
     }); 
    </script> 
</polymer-element> 

Meine Probleme:

• Was ist die beste Art, zusätzliches Styling anzugeben?
• Kann ich das Basiselement in zusätzliches Markup (wie einen anderen Container) einpacken?
• Kann ich Elemente aus dem Basiselement auswählen? So etwas wie <content select=".stuff">, aber für die Schattenmarkierung der Basis.

Answer 1

• Was ist der beste Weg, um zusätzlichen Styling geben?

1. eine Vorlage in der Unterklasse Put (my-custom-element), wie üblich.
2. Fügen Sie ein Element <shadow></shadow> ein, in dem die Superklassenvorlage angezeigt werden soll.
3. Fügen Sie ein Style-Tag in die neue Vorlage ein.
4. Elemente stylen, die von der übergeordneten Klasse-Vorlage kommen, einen Selektor wie folgt verwenden: unter

:host::shadow .someclass { ... }

Siehe Beispiel.

• Kann ich das Basiselement in zusätzliche Markup wickeln (wie ein anderer Behälter)?

Ja, können Sie, was Markup Sie rund um die <shadow></shadow> möchten setzen.

<div> 
    <shadow></shadow> 
</div> 

• Kann ich wählen Elemente aus dem Basiselement? So etwas wie <content select=".stuff">, aber für die Schattenmarkierung der Basis.

Nein, Sie nicht so projizieren kann (es ist die Rückwärtsrichtung von allen anderen Projektionen).

Wenn Sie wirklich Knoten aus der älteren Schattenwurzel auswählen möchten, können Sie dies im Code tun, indem Sie Knoten direkt aus this.shadowRoot.olderShadowRoot ziehen. Aber das kann schwierig sein, weil die Superklasse Erwartungen über die Struktur haben kann.

Beispielcode:

<polymer-element name="my-custom-element" extends="custom-element"> 
<template> 

    <style> 
     /* note that :host::shadow rules apply 
     to all shadow-roots in this element, 
     including this one */ 
     :host::shadow #container { 
     color: blue; 
     } 
     :host { 
     /* older shadow-roots can inherit inheritable 
      styles like font-family */ 
     font-family: sans-serif; 
     } 
    </style> 
    <p> 
    <shadow></shadow> 
    </p> 

</template> 
<script> 

    Polymer('my-custom-element', { 
    clickContainer: function() { 
     this.super(); 
    } 
    }); 

</script> 
</polymer-element> 

ProTips:

• olderShadowRoot existieren wird, ob Sie die <shadow></shadow>-Tag enthalten, aber es wird nicht Teil des gerenderten DOM sein, wenn Sie tun.
• um zu verhindern, dass olderShadowRoot(s) erstellt wird, können Sie parseDeclarations (source) überschreiben. Beliebige von parseDeclarations, parseDeclaration, fetchTemplate können für verschiedene Effekte überschrieben werden.

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• Keine verwandten Themen^_^