Twitter bootstrap Polymer.dart动态添加的元素并不总是出现

我正在向自定义元素中的引导选项卡框添加选项卡和选项卡窗格。有时它们会出现，但通常不会。有时会显示窗格，但不会显示选项卡。每次重新加载的结果都不同。如果它没有出现，则通过调整浏览器窗口大小或打开Dartium inspector等操作导致回流，使其突然出现

我用的是聚合物0.9.5。以下是HTML：

<polymer-element name="confab-output-box">
  <link rel="stylesheet" type="text/css" href="../resources/css/bootstrap.min.css">
  <template bind>
    <div id="output_container">
      <ul id="tabs" class="nav nav-tabs">
      </ul>
      <div id="tab-content" class="tab-content">
      </div>
    </div>
  </template>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="../resources/js/bootstrap.min.js"></script>
  <script type="application/dart" src="confab_output_box.dart"></script>
</polymer-element>

---

动态添加元素的问题主要是由于未在

main

中使用

initPolymer

引起的

见：

问题可能是时间问题。可能是在插入新标记之前执行引导脚本

是否可以尝试将添加新元素的代码移动到

enteredView

void enteredView（）{
//在此处创建并添加元素
super.enteredView（）；
}

我有

出口包装：polymer/init.dart'index.html

的

标题中的code>。这还不够吗？（我一直不明白为什么它是一个
导出
，但这是文档所说的。）无论如何，聚合物0.10.0-pre.7已经改变了这一点。你没有
main
方法吗？对不起，我想我误解了这个问题。您不是动态添加聚合元素，而是简单的DOM元素。我在回答中添加了一个提示，说明我在您的代码中发现了一些错误。问题可能是时间问题。可能引导脚本是在插入新标记之前执行的。元素是在触发
enteredView
之后添加的。这是对一个按钮点击触发的websocket消息的响应。但不，我没有主功能，我使用的是polymer 0.9.5。
library confab_output_box;

import 'dart:html';
import 'package:polymer/polymer.dart';
import '../confab_view/confab_view.dart';

@CustomTag('confab-output-box')
class ConfabOutputBox extends PolymerElement {
    ConfabView activeView;

    ConfabOutputBox.created() : super.created();

    void attachView(ConfabView view) {
        $['tabs'].children.add(
            new LIElement()
                ..id = '${view.id}-tab'
                ..children.add(
                    new AnchorElement()
                        ..href = '#${view.id}'
                        ..onClick.listen(tabClicked)
                        ..text = view.tabTitle
                )
        );

        $['tab-content'].children.add(view..classes.add('tab-pane'));
    }

    void detachView(ConfabView view) {
        shadowRoot.getElementById('${view.id}-tab').remove();
        shadowRoot.getElementById(view.id).remove();
    }

    void activateView(ConfabView view) {
        if (activeView != null) {
            shadowRoot.getElementById('${activeView.id}-tab').classes.remove('active');
            shadowRoot.getElementById(activeView.id).classes.remove('active');
        }
        shadowRoot.getElementById('${view.id}-tab').classes.add('active');
        shadowRoot.getElementById(view.id).classes.add('active');
        activeView = view;
    }

    void tabClicked(Event e) {
        e.preventDefault();
        ConfabView view = shadowRoot.querySelector((e.toElement as AnchorElement).href);
        activateView(view);
    }
}