Accessing and using Light-DOM content from a polymer-element definition - polymer

Question

got a question here. I have a very simple polymer-element that taking a series of <a> anchor tags inside it (the Light-DOM), it creates some kind of navigation bar. So my simple solution consists in to get access to the Light-DOM (from the polymer-element) to know how many anchors the user put in there and also get some information that i need for generate the thing in a template as follows:
<!-- this is the polymer-element -->
<polymer-element name='x-nav' >
<template>
<style>
a {color: blue;}
li{display: inline-block;}
</style>
<nav>
<ul>
<template repeat="{{links}}">
<li>
{{innerHTML}}
</li>
</template>
</ul>
</nav>
</template>
<script>
Polymer('x-nav', {
ready: function(){
this.links = [];
for(var i = 0; i < this.children.length; i++){
this.links.push(this.children[i]);
}
}
});
</script>
</polymer-element>
<!-- this is the implementation in the Light-DOM -->
<x-nav>
<a href='/hone'>home</a>
<a href='/about'>about</a>
<a href='/contact'>contact</a>
</x-nav>
The question is that I really dont know if this is a good approach or if there are a better way or "best practices" to accomplish this kind of stuff, when we want to create customizable elements and we dont know what or how many tags the user will put in the ligh-dom side. Thanks! :D

Answer 1

That seems fairly reasonable to me and should work fine, so long as the <x-nav>'s links are static.
Two things of note, rather than this.children you could try this.querySelectorAll('a') to be sure that you only get the 'a' nodes.
You could also look into using <content select='a'></content> as that's responsive to changes in the x-nav's light dom, but I don't know of a way to put each anchor in a separate <li> with <content>. It's possible that <content select='a[nth-child({{idx}})]'></content> would work, requiring you to only keep track of how many anchors are in the light dom.