dart - 使用Polymer-Dart为标签Web组件创建标签标题

Question

我正在尝试使用polymer-dart创建自定义标签 Web组件。组件本身是一个标签容器，其中可以包含自定义标签元素。
我想要一个这样的html:

<custom-tabs selected="three">
   <custom-tab name="one">... content skipped ...</custom-tab>
   <custom-tab name="two">... content skipped ...</custom-tab>
   <custom-tab name="three">... content skipped ...</custom-tab>
</custom-tabs>

在custom-tabs html文件中，我想要这样的内容:

<polymer-element name="custom-tabs">
    <template>
       <div class="tabs">
           <content select="custom-tab"></content>
       </div>
       <nav>
           For each of custom-tab I want to create tab header (link) here
       </nav>
    </template>
</polymer-element>

是否可以:

为插入.tabs的每个自定义标签在div内创建链接？

如果custom-tab元素具有名为“标题”的属性，我可以使用某种{{attribute-name}}语法来获取它吗？

最后，我要看起来像这样的组件:

附言我只需要 polymer-dart <template>语法方面的帮助，我可以自己处理CSS。提前致谢!

Answer 1

<link rel="import" href="../../packages/polymer/polymer.html">

<polymer-element name="custom-tabs">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <nav>
      <template repeat="{{tab in tabHeaders}}">
        <div>{{tab}}</div>
      </template>
    </nav>
    <div class="tabs">
      <content id="content" select="custom-tab"></content>
    </div>
  </template>
  <script type="application/dart" src="custom_tabs.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';
import 'dart:html' as dom;

@CustomTag('custom-tabs')

class CustomTabs extends PolymerElement {

  CustomTabs.created() : super.created() {}

  @observable
  // toObservable() is to make Polymer update the headers (using template repeat) when the tabs list changes later on
  List<String> tabHeaders = toObservable([]); 

  attached() {
    super.attached();

    // initialize the header list when the custom-tabs element is attached to the dom    
    updateTabHeaders();
  }

  // needs to be called every time the list of custom-tab children changes
  void updateTabHeaders() {
    tabHeaders.clear();
    // the content element needs to have the id 'content' 
    ($['content'] as dom.ContentElement).getDistributedNodes().forEach((e) {
      // you can skip elements here for example based on attributes like 'hidden'
      tabHeaders.add((e as dom.Element).attributes['name']);
    });
  }
}