 <p>In Shadow DOM land, this is called distribution. To distribute light DOM nodes into the shadow dom, you use <code>&lt;content&gt;</code> insertion points.</p> <p><a href="http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees">http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees</a></p> <p>It's quite literally a way to render nodes from light dom into placeholders in the shadow dom. If you want to do tricky things with the my-header/my-header-item title/name attributes, you can do something like this:</p> <pre><code>&lt;polymer-element name="my-header"&gt; &lt;template&gt; &lt;ul&gt; &lt;template repeat="{{item in items}}"&gt; &lt;li&gt;{{item.name}}&lt;/li&gt; &lt;/template&gt; &lt;/ul&gt; &lt;content id="c" select="my-header-item"&gt;&lt;/content&gt; &lt;/template&gt; &lt;script&gt; Polymer('my-header', { domReady: function() { this.items = [].slice.call(this.$.c.getDistributedNodes()); } }); &lt;/script&gt; &lt;/polymer-element&gt; </code></pre> <p>Demo: <a href="http://jsbin.com/hupuwoma/1/edit">http://jsbin.com/hupuwoma/1/edit</a></p> <p>I have a more full-fledged tabs demo does this setup over on <a href="https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html">https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html</a>.</p>