使用聚合物內容元素中的自定義元素

Question

我試圖掌握聚合物和陰影dom。處理動態內容時，是否可以在自定義元素中使用自定義元素？例如，在WordPress中，我可以使用<?php wp_nav_menu(array('theme_location' => 'primary')); ?>列出我的菜單鏈接。如果我爲我的菜單創建了一個<main-menu>元素，那麼我將如何在每個<li>周圍包裝另一個自定義元素？

這裏是我的主菜單中的HTML文件：

<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> 

顯然，使用<content select="li"><paper-tab></paper-tab></content>不完成我想做的事情，但我不知道我怎麼會去包裹<paper-tab>各地各<li>

Answer 1

在這種情況下，您需要使用getDistributedNodes方法來抓取所有這些li s，將它們轉換爲數組，然後將其交給重複模板。針對這個討論有一點更多的解釋：Element transclusion

下面是一個例子（http://jsbin.com/hazay/9/edit）：

<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>