고분자 : 부모 요소를 둘레로 감싸기

Question

고분자로 다른 웹 구성 요소를 쉽게 확장 할 수 있습니다. <shadow>을 사용하여 부모의 음영 돔이 (polymer docs)이어야하는 하위 템플릿의 위치를 ​​표시 할 수 있습니다.

저는 요소를 확장하려고하지만, 특정 부분의 자식이 부모에 의해 래핑되는 방식으로 보입니다. 이러한 종류의 설정은 일부 템플릿 엔진에서 사용했습니다. 이것이 html에 포함될 수 있습니까?

부모 ::

<link rel="import" href="/bower_components/polymer/polymer.html"> 

<polymer-element name="tpl-parent" noscript> 
    <template> 
    <section> 
     <content></content><!-- put the child template here --> 
    </section> 
    </template> 
</polymer-element> 

아이 ::

<link rel="import" href="/bower_components/polymer/polymer.html"> 
<link rel="import" href="parent.html"> 

<polymer-element name="tpl-child" extends="tpl-parent" noscript> 
    <template> 
    <shadow> 
     <p>whatever I put here should be "wrapped" by the _section_ in parent</p> 
    </shadow> 
    </template> 
</polymer-element> 

Answer 1

@ robdodson의 대답은 완전히 정확하지만 느낌은 너무 느슨합니다.

직장에서 이것을 더 논의 할 때, 누군가는 "Composition over inheritance"의 원리에 주목했습니다. 이로 인해 나는이 상황을 다른 관점에서 바라 보았다. X-bar.html에는

<link rel="import" href="x-foo.html" arguments="status"> 

<polymer-element name="x-bar"> 
    <template> 
    <x-foo status="{{status}}"> 
     <p>color me</p> 
    </x-foo> 
    </template> 
    <script> 
    Polymer(); 
    </script> 
</polymer-element> 

-

<polymer-element name="x-foo" arguments="status"> 
    <template> 
    <style> 
     #wrapper.valid ::content p { color: green; } 
     #wrapper.invalid ::content p { color: red; } 
    </style> 
    <section id="wrapper"> 
     <p>x-bar will be put in the content tag below</p> 
     <content></content> 
    </section> 
    </template> 
    <script> 
    Polymer({ 
     status: '', 
     statusChanged: function(oldVal, newVal) { 
     if (['valid', 'invalid'].indexOf(newVAl) === -1) { 
      this.$.wrapper.setAttribute('class', newVal); 
     } 
     } 
    }); 
    </script> 
</polymer-element> 

X-foo.html을 -

:

나는 (도 통과 인수의 예 포함)이 함께 종료

- index.html

<link rel="import" href="x-bar.html" arguments="status"> 
<x-bar></x-bar> 

유일한 "단점"은 "상태"를 전달해야한다는 것입니다. 하지만이게 슈퍼 클래스의 "떠 다니는"div # 래퍼에 추가해야하는 것 같아요.

Answer 2

당신은 선언적으로 그런 식으로 할 수 없습니다. 하지만 자동 노드 찾기 기능을 활용하여 아이가있는 경우 아이를 부모 섹션으로 이동시킬 수 있다고 생각합니다.

<polymer-element name="x-foo"> 
    <template> 
    <style> 
     #wrapper p { color: red; } 
    </style> 
    <section id="wrapper"> 
     <p>Hello from x-foo</p> 
    </section> 
    </template> 
    <script> 
    Polymer({ 

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

<polymer-element name="x-bar" extends="x-foo"> 
    <template> 
    <p id="foo">I was wrapped by x-foo</p> 
    <p>I was not wrapped</p> 
    <shadow></shadow> 
    </template> 
    <script> 
    Polymer({ 
     domReady: function() { 
     this.$.wrapper.appendChild(this.$.foo); 
     } 
    }); 
    </script> 
</polymer-element> 

<x-bar></x-bar>