3

Using polymer.dart, how can I ensure that styles referenced in the consuming page are still available in the template?

I have a consuming, or main, page, thus:

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

and a template, thus:

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

and the <div> in the a-pony element is not styled appropriately when the page is rendered.

I've seen the demo stuff and read this, but these are specific to styles that are declared inside the template, and don't cover the case where the styles are external.

4

3 回答 3

4

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

import 'package:polymer/polymer.dart';

@CustomTag("a-pony")
class APony extends PolymerElement {
  void created(){
    super.created();
    var root = getShadowRoot("a-pony");
    root.applyAuthorStyles = true;
  }
}
于 2013-08-17T19:48:26.870 回答
3

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

<polymer-element name="a-pony" extends="div" apply-author-styles>
于 2013-08-15T21:26:20.323 回答
2

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

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

编辑

Seth Ladd 为他在 Github 上的Polymer 示例存储库添加了一些引导程序特定的东西，Seth 欢呼。

于 2013-08-25T09:27:25.323 回答