Question

在这里有个问题。我有一个非常简单的polymer-element，它内部有一系列<a>锚标签（Light-DOM），它创建了某种导航栏。因此，我的简单解决方案是访问Light-DOM（来自聚合物元素）以了解用户放置了多少锚点，并获得了在模板中生成事物所需的一些信息，如下所示： / p>

<!-- 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>

问题是我真的不知道这是一种好的方法，还是有更好的方法或最佳实践＆＃34;当我们想要创建可自定义的元素并且我们不知道用户将放置在ligh-dom侧的标签的数量或数量时，要实现这种类型的东西。谢谢！：d

Answer 1

这对我来说似乎相当合理，只要<x-nav>的链接是静态的，就应该可以正常工作。

有两点需要注意，而不是this.children您可以尝试this.querySelectorAll('a')以确保您只获得了“{1}}节点

您也可以考虑使用<content select='a'></content>，因为它会响应x-nav的灯光变化，但我不知道如何放置每个锚点在单独的<li>中<content>。 <content select='a[nth-child({{idx}})]'></content>可能有效，要求您只跟踪灯光中有多少个锚点。

访问和使用聚合物元素定义中的Light-DOM内容

1 个答案: