CODEWITHSUNDEEP
polymerweb-componentshadow-dom
user715564
user715564

Reputation: 1690

Using custom elements in the content element with polymer

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>

Upvotes: 2

Views: 1992

Answers (1)

robdodson
robdodson

Reputation: 6786

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>

Upvotes: 4

Related Questions