Polymer 从聚合元素定义访问和使用轻DOM内容

这里有个问题。我有一个非常简单的

聚合物元素

，它包含一系列

聚合物（'x-nav'{
就绪：函数（）{
this.links=[]；
for（var i=0；i

---

问题是，我真的不知道这是否是一个好方法，或者是否有更好的方法或“最佳实践”来完成这类工作，当我们想要创建可定制的元素时，我们不知道用户将在ligh dom端放置什么或多少标记。谢谢D

这对我来说似乎相当合理，只要

的链接是静态的，就可以正常工作

请注意两件事，而不是

this.children

您可以尝试

this.queryselectoral（'a'）

，以确保只获得'a'节点

您也可以考虑使用

，因为这是对x-nav灯光dom变化的响应，但我不知道如何使用

将每个锚点放置在单独的

中。有可能

会起作用，只需要跟踪光域中有多少锚

<!-- 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>
            <a href="{{href}}">{{innerHTML}}</a>
          </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>