Dart 聚合物模板中的 Twitter Bootstrap 样式答案

【问题标题】：Twitter Bootstrap styles in Dart polymer templateDart 聚合物模板中的 Twitter Bootstrap 样式
【发布时间】：2013-08-18 04:02:27
【问题描述】：

使用polymer.dart，如何确保消费页面中引用的样式在模板中仍然可用？

我有一个消费页面或主页面，因此：

<html>
<head>
    <link rel="stylesheet" href="aplaceontheinterweb" />
    <link rel="import" href="ponies.html" />
</head>
<body>    
    <div class="defined_in_the_included_file">
        ...
    </div>    
    <div is="a-pony"></div>
    <script src="packages/polymer/boot.js"></script>
</body>

</html>

和一个模板，因此：

<polymer-element name="a-pony" extends="div">
    <template>
        <div class="defined_in_the_css_file_referenced_in_main_html">
            ....
        </div>
    </template>
</polymer-element>

并且在呈现页面时，a-pony 元素中的 <div> 样式不正确。

我看过演示资料并阅读了this，但这些是特定于在模板内声明的样式，不包括样式是外部的情况。

【问题讨论】：

标签： twitter-bootstrap dart polymer

【解决方案1】：

你需要设置 apply-author-styles 来告诉组件使用页面 CSS：

<polymer-element name="a-pony" extends="div" apply-author-styles>

【讨论】：

您好，感谢您的建议，但这样做没有效果；我得到了和以前一样的结果。

【解决方案2】：

尝试在代码中添加应用作者样式：

import 'package:polymer/polymer.dart';

@CustomTag("a-pony")
class APony extends PolymerElement {
  void created(){
    super.created();
    var root = getShadowRoot("a-pony");
    root.applyAuthorStyles = true;
  }
}

【讨论】：

谢谢，但还是不行。一定是我从根本上做错了什么。
检查你的 CSS 定义。当 css 定义涉及跨越 DOM 和 Shadow DOM 的后代类时，我遇到了问题。

【解决方案3】：

所以我在问题中没有提到的关键信息是我尝试应用的样式在 Twitter Bootstrap 中，特别是引导 css 文件是通过 cdn 加载的。

解决方案是 Alan 的答案和 this 的组合。我必须将引导文件放入本地副本，而不是从 cdn 中提取，并通过代码（根据 Alan 的代码）加载作者样式，而不是通过标记。

编辑

Seth Ladd 在他的 Github 上的 Polymer samples 存储库中添加了一些引导程序特定的内容，Seth 欢呼雀跃。

【讨论】：