Polymer 2.0とアトリビュートを子に渡す

Question

Polymer 2.0でWebコンポーネントを使いこなしています。

私はこのようなルックス書きたいエンドHTML：あなたが見ることができるように

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

を、私はトップレベルのコンポーネントにサイズを渡しています。私はこれらのカードの幅に耳を傾け、ヘッダー、ボディー、フッターのパディングを減らし、サイズが小さくなると基本的に応答性の高い要素になります。

どのようにすればいいのかわからないのは、サイズの属性値をcard-header,card-body、card-footerポリマー宣言に渡すことです。ここで

は私が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> 

そして、ここでは、私が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を定義しています方法です; DR：どのように私は、親ノードの属性値を取得しますか、特定の子ノード（card-headerまたはcard-bodyまたはcard-footer）に値を渡すか、DOMの属性をPolymerで更新しないでください。

Answer 1

ソリューション

あり、これを解決するためのいくつかの方法がありますが、私は私が<slot></slot>中に必要なものを入れていた実現ので、私はその後、カードレベルでのパディングのロジックを行うCSS変数で扱うことができます。

_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(); 
    },