Twitter Bootstrap styles in Dart polymer template
Question
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.
3 answers
solution1
4 2013-08-17 19:48:26
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;
}
}
solution2
3 2013-08-15 21:26:20
您需要设置apply-author-styles以告诉组件使用页面CSS：
<polymer-element name="a-pony" extends="div" apply-author-styles>
solution3
2 ACCPTED 2013-08-25 09:27:25
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.