I try to use the content-tag in dart polymer. The Polymer-Element is displayed properly, but the content is not displayed at all.
This is my code:
<polymer-element name="modal-dialog" >
<link rel="stylesheet" href="packages/bootjack/css/bootstrap.css">
<template>
<button on-click="{{show}}">jo</button>
<div id="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 style="margin: 0">Bootjack</h3>
</div>
<div class="modal-body">
<content></content>
</div>
<div class="modal-footer" style="margin: 0">
<button class="btn btn-success" data-dismiss="modal" id="ok">OK</button>
</div>
</div>
</div>
</div>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'package:bootjack/bootjack.dart';
import 'dart:html';
@CustomTag('modal-dialog')
class ModalDialog extends PolymerElement {
Modal modal;
ModalDialog.created() : super.created(){
Modal.use();
Transition.use();
modal = Modal.wire(this.shadowRoot.querySelector("#modal"));
}
void show(){
modal.show();
}
}
</script>
</polymer-element>
Then I instantiate in the index.html:
<modal-dialog>This should be in the content-tag</modal-dialog>
I am using:
Dart Editor version 1.2.0.release (STABLE)
Dart SDK version 1.2.0
OS X 10.8.5
Thank you for any hints :)
I tried your code. I removed the CSS link and the content was show in the right place.
It might be you run into the same bug as I did recently CSS linked in entry page header moved into content by pub build
Add this CSS after your style tag
you will see that the CSS is moved into the content. Polymer seems to have some problems with CSS currently.