使用聚合物内容元素中的自定义元素

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>