我正在尝试了解 polymer 和 Shadow 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>
最佳答案
在这种情况下,您需要使用 getDistributedNodes
方法来获取所有这些 li
,将它们转换为数组,然后将其交给重复模板。该线程有更多解释: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>
关于polymer - 在带有 polymer 的内容元素中使用自定义元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24768149/