I'm trying to get a grasp on polymer and the shadow dom. Is it possible to use custom elements inside of custom elements when dealing with dynamic content? For example, in WordPress I can use <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> to list out my menu links. If I create a <main-menu> element for my menu, how would I wrap another custom element around each <li>?
Here is my main-menu html file:
<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>
Obviously, using <content select="li"><paper-tab></paper-tab></content> doesn't accomplish what I want to do but I am not sure how I would go about wrapping <paper-tab> around each <li>
In this instance, you'll need to use the getDistributedNodes method to grab all of those lis, turn them into an Array, and hand that off to a repeating template. This thread has a bit more explanation: Element transclusion
Here's an example (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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments