장식 요소 <content>

Question

나는 div 안에 모든 어린이들을 특정 클래스로 묶어야하는 컨테이너 인 form-el입니다. 각 양식 요소에서이 div을 반복하는 대신에 from-el을 감싸는 것을 허용하고 싶습니다. 모든 요소를 ​​반복하여 다른 HTML 태그 안에 감쌀 수 있습니까? 이를 달성하기

// Markup 
<form-el> 
    <input-el label="name" type="text" /> 
    <span>This must also be wrapped</span> 
</form-el> 

// Would produce 
<form> 
    <div class="form-field"> 
     <label>name</label> 
     <input type="text" name="name" /> 
    </div> 
    <div class="form-field"> 
     <span>This must also be wrapped</span> 
    </div> 
</form> 
// Where '<div class="form-field">' is produced by 'from-el' 

Answer 1

한 가지 방법과 같이, 너희 빛을-DOM에 맞는 <content> 노드를 템플릿 - 반복하는 것입니다 :

<polymer-element name="form-el"> 
<template> 

    <template repeat="{{wrappers}}"> 
    <div style="border: 2px solid orange; padding: 2px; margin: 4px"> 
     <content select="[key='{{}}']"> 
    </div> 
    </template> 

</template> 
<script> 

    Polymer({ 
    domReady: function() { 
     this.updateWrappers(); 
    }, 
    updateWrappers: function() { 
     this.wrappers = []; 
     for (var i=0, n=this.firstChild; n; n=n.nextSibling) { 
     if (n.setAttribute) { 
      // attach a selectable key to each light-dom node 
      n.setAttribute('key', i); 
      // specify a <content> with that key 
      this.wrappers.push(i++); 
     } 
     } 
    } 
    }); 

</script> 
</polymer-element> 

http://jsbin.com/mukip/5/edit