Question

使用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>

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

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

Answer 1

尝试在代码中添加apply-author-styles：

import 'package:polymer/polymer.dart';

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

Answer 2

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

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

Answer 3

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

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

修改

Seth Ladd帮助他在Github的Polymer samples回购中添加了一些特定于bootstrap的东西，为赛斯喝彩。

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

3 个答案: