Bootstrap dropdown / navbar-toggle in a Polymer Web Component -

i trying use bootstrap application based on polymer web components. based on question: bootstrap.js not working in polymer components can bootstrap working including within component's template can see shadow dom content.

however, appears functionality dropdowns , navbar-toggle still not work. there workaround this?

i created jsfiddle tries demonstrate this. global dropdown work if bootstrap js/css not included in polymer component's . component's dropdown partially styled correctly, not function if bootstrap js/css included in polymer component's . break functionality of global dropdown.

http://jsfiddle.net/u72xk3kk/

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">  <nav class="navbar-default" role="navigation">     <article class="container-fluid">         <header class="navbar-header">             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>             </button>             <span class="navbar-brand">navbar</span>         </header>         <section class="collapse navbar-collapse">             <ul class="nav navbar-nav">                 <li><a>foo</a></li>                 <li><a>bar</a></li>             </ul>         </section>     </article> </nav>      dropdown works fine if bootstrap js , css includes not done in component's template:<br/>     <div id="works" class="dropdown">         <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">             global dropdown             <span class="caret"></span>         </button>         <ul id="blarg" class="dropdown-menu" role="menu">             <li>foo</li>             <li>bar</li>         </ul>     </div>       <polymer-element name="my-component">     <template>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>         <div class="dropdown">         <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">             component dropdown <span class="caret"></span>         </button>         <ul class="dropdown-menu" role="menu">             <li>eggs</li>             <li>spam</li>         </ul>     </div>        <content/>     </template>     <script>         polymer({});     </script> </polymer-element>      dropdown partially styled ok, doesn't work if bootstrap js , css included in polymer component templae:<br/> <my-component/> 

        ready: function () {             $('.dropdown-toggle').dropdown();         } 

i included js file in page header, , not in components in project, , have working dropdowns in page , components both. bootstrap/js/dropdown.js"