Bootstrap.js not working in Polymer components

Question

I\'m currently working on translating our current Dart Web UI project to Polymer.dart. We use Bootstrap 3 for the front-end styling and many web animations (e.g. dropdown me

Answer 1

The problem as pointed out in the other answers is the shadow dom. Bootstrap does not see the elements in there, and thus can not do its magic. You can disable the shadowdom and apply the author styles like this:

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('main-messages')
class MainMessagesElement extends PolymerElement {
  MainMessagesElement.created() : super.created();

  //This enables the styling via bootstrap.css
  bool get applyAuthorStyles => true;
  //This enables the bootstrap javascript to see the elements
  @override
  Node shadowFromTemplate(Element template) {
    var dom = instanceTemplate(template);
    append(dom);
    shadowRootReady(this, template);
    return null; // no shadow here, it's all bright and shiny
  }   
}

You will need to remove the shadowdom for all parent elements as well.

WARNING: You will use the on-click event handler by using lightdom :(