Twitter Bootstrap styles in Dart polymer template

问题

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.

回答1:

Try adding apply-author-styles in code:

import 'package:polymer/polymer.dart';

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

回答2:

You need to set apply-author-styles in order to tell the component to use the page CSS:

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

回答3:

So the crucial piece of information I didn't mention in the question is that the styles i'm attempting to apply are in Twitter Bootstrap, and specifically the bootstrap css file is loaded via a cdn.

The resolution is a combination of Alan's answer, and this. I had to bring the bootstrap file into a local copy, rather than pulling in from a cdn, and load author styles via code (as per Alan's code), not via markup.

Edit

Seth Ladd has helpfully added some bootstrap specific stuff to his Polymer samples repo on Github, cheers Seth.

来源：https://stackoverflow.com/questions/18261596/twitter-bootstrap-styles-in-dart-polymer-template

标签

twitter-bootstrap

dart

polymer