Polymer 2.0 und Weitergabe eines Attributs an Kinder

Question

Ich spiele mit Web-Komponenten durch Polymer 2.0.

Das Ende HTML Ich möchte wie folgt aussieht schreiben:

<card size="small"> 
    <card-header> 
    // Markup 
    </card-header> 
    <card-body> 
    // Markup 
    </card-body> 
    <card-footer> 
    // Markup 
    </card-footer> 
</card> 

Wie Sie sehen können, bin ich vorbei Größe auf die oberste Ebene Komponente. Ich beabsichtige, die Breite dieser Karten zu hören und die Auffüllung der Kopf-, Körper- und Fußzeilen zu reduzieren, wenn sie zu kleineren Größen, im Grunde reagierenden Elementen, kommen.

Was ich nicht herausfinden kann, wie zu tun ist, erhalten Sie den Attributwert der Größe zu den card-header, card-body und card-footer Polymer-Deklarationen übergeben.

Hier ist, wie ich die Definition card:

<link rel="import" href="card-header.html"> 
    <dom-module id="card"> 
     <template> 
     <style> 
      // Style things 
     </style> 

     <slot></slot> 
     </template> 
     <script> 
    Polymer({ 
     is: 'card', 

     properties: { 
     size: { 
      type: String, 
      value: "medium", 
      observer: '_observeSize' 
     }, 
     }, 

     _observeSize: function() { 
     const sizes = { 
      tiny: "1em", 
      small: "2em", 
      medium: "3em", 
      large: "6em" 
     }; 

     if (this.size == "tiny") { 
      this.customStyle['--padding-x'] = sizes.tiny; 
      this.customStyle['--padding-y'] = sizes.tiny; 
     } else if (this.size == "small") { 
      this.customStyle['--padding-x'] = sizes.small; 
      this.customStyle['--padding-y'] = sizes.small; 
     } else if (this.size == "medium") { 
      this.customStyle['--padding-x'] = sizes.medium; 
      this.customStyle['--padding-y'] = sizes.medium; 
     } else if (this.size == "large") { 
      this.customStyle['--padding-x'] = sizes.large; 
      this.customStyle['--padding-y'] = sizes.large; 
     } else { 
      this.customStyle['--padding-x'] = sizes.medium; 
      this.customStyle['--padding-y'] = sizes.medium; 
     } 

     this.updateStyles(); 
     }, 

     _responsiveObserver: function() { 
     // Update this.size based on width of this element. 
     } 

    }); 
    </script> 
</dom-module> 

Und hier ist, wie ich card-header

<dom-module id="card-header"> 
    <template> 
     <style> 
     // Style 
     </style> 
    <slot></slot> 

    </template> 

    <script> 
    Polymer({ 
     is: 'card-header', 

     properties: { 
     size: { 
      type: String, 
     } 
     }, 

     ready: function() { 
     console.log(this.size); 
     // console.log(hostValue::size); ???? something like this ???? 
     } 
    }); 
    </script> 
</dom-module> 

TL bin definiert; DR: Wie erhalte ich den Attributwert von einem übergeordneten Knoten, Oder übergeben Sie den Wert an den bestimmten untergeordneten Knoten (card-header oder card-body oder card-footer), ohne die Attribute im DOM mit Polymer zu aktualisieren?

Answer 1

Lösung

Es gibt ein paar Möglichkeiten, dies zu lösen, aber ich merkte, dass ich setzen, was ich brauchte in den <slot></slot>, so konnte ich die Polsterung Logik auf der Karte Ebene tue dann in einem CSS-Variable behandeln .

_observeSize: function() { 
    // const and if else blocks still exist, untouched. Since they set the customStyle object on this element... 

    var children = this.querySelectorAll('card-header, card-body, card-footer'); 

    children.forEach(function (child) { 
     child.style = this.customStyle; 
    }); 

    this.updateStyles(); 
    },