폴리머로 내용 요소의 사용자 정의 요소 사용

Question

나는 폴리머와 섀도우 DOM에 대한 이해를 얻으려고합니다. 동적 콘텐츠를 처리 할 때 맞춤 요소 내부에서 맞춤 요소를 사용할 수 있습니까? 예를 들어 WordPress에서는 <?php wp_nav_menu(array('theme_location' => 'primary')); ?>을 사용하여 메뉴 링크를 나열 할 수 있습니다. 내 메뉴에 <main-menu> 요소를 만드는 경우 각 주변에 다른 맞춤 요소를 포함 할 수 있습니까? <li>? 내가 원하는 것을 달성하지 않습니다 <content select="li"><paper-tab></paper-tab></content>를 사용하여, 분명히

<link rel="import" href="/components/polymer/polymer.html"> 
<link rel="import" href="/components/core-header-panel/core-header-panel.html"> 
<link rel="import" href="/components/core-toolbar/core-toolbar.html"> 
<link rel="import" href="/components/paper-tabs/paper-tabs.html"> 

<polymer-element name="main-menu"> 
<template> 
<style> 

.main-menu ::content ul li { 
    float: left; 
    list-style-type: none; 
    margin-left: 20px; 
} 

core-header-panel { 
    height: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
} 
core-toolbar { 
    background: #03a9f4; 
} 

core-toolbar ::content ul li a { 
    color: white; 
    text-decoration: none; 
    font-size: 14px; 
    text-transform: uppercase; 
} 

</style> 

<core-header-panel> 
    <core-toolbar> 
    <div class="main-menu"> 
     <paper-tabs> 
     <content select="li"><paper-tab></paper-tab></content> 
     </paper-tabs> 
    </div> 
    </core-toolbar> 
</core-header-panel> 

</template> 
<script> 
Polymer({}); 
</script> 
</polymer-element> 

하지만 난 각 <li>

주위 <paper-tab> 포장에 대한 갈 것이라고 어떻게 확신하지 : 여기

내 메인 메뉴 HTML 파일입니다

Answer 1

이 경우에 을 모두 가져 와서 배열로 변환 한 다음이를 반복 템플릿에 전달하려면 getDistributedNodes 메서드를 사용해야합니다.

<polymer-element name="main-menu"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
     ::content > * { 
     display: none; 
     } 
    </style> 
    <content id="c" select="li"></content> 
    <paper-tabs> 
     <template repeat="{{item in items}}"> 
     <paper-tab>{{item.textContent}}</paper-tab> 
     </template> 
    </paper-tabs> 
    </template> 
    <script> 
    Polymer({ 
     items: [], 
     domReady: function() { 
     // .array() is a method added by Polymer to quickly convert 
     // a NodeList to an Array 
     this.items = this.$.c.getDistributedNodes().array(); 
     } 
    }); 
    </script> 
</polymer-element> 

<main-menu> 
    <li><a href="#">Foo</a></li> 
    <li><a href="#">Bar</a></li> 
    <li><a href="#">Baz</a></li> 
</main-menu> 

: 여기

Element transclusion는 예 (http://jsbin.com/hazay/9/edit)의 :이 스레드는 좀 더 설명이있다