Polymer 2.0 및 하위에 특성 전달

Question

Polymer 2.0을 통해 웹 구성 요소를 가지고 놀고 있습니다.

이 같은 모습을 기록 할 최종 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 중합체 선언으로 전달해야한다는 것입니다.

<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을 정의하고 있습니다 방법은 어떻게 부모 노드의 속성 값을받을 수 있나요, Polymer를 사용하여 DOM의 속성을 업데이트하지 않고 값을 특정 하위 노드 (card-header 또는 card-body 또는 card-footer)로 전달할 수 있습니까?

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