Using Polymer 2.0 with Bootstrap JS

[Andrii La]

Hi.

I need to use Polymer 2.0 (for creating Web components), and Bootstrap (as a framework for styling). I've created simple web component and added dropdown element into it:

<dom-module id="my-component">
  <template>
    <link rel="stylesheet" type="text/css" 
      href="../bower_components/bootstrap/dist/css/bootstrap.css">

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" 
          data-toggle="dropdown" id="dropTest">Dropdown Example
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
      </ul>
    </div>
  </template>

  <script>
    class MyComponent extends Polymer.Element {
      static get is() { return 'my-component' }

      constructor() {
        super();
      }
    }

    customElements.define(MyComponent.is, MyComponent);       
  </script>
</dom-module>

But, when I click on dropdown it is not working correctly. I can see that Bootstrap's styles are being applied, but dropdown doesn't expand.
I think it could be because Polymer uses Shadow DOM, and Bootstrap JS cannot use it.
Bootstrap CSS works. But my main problem is Bootstrap JS doesn't work. Is it possible to use Bootstrap JS with Polymer, despite on Shadow DOM? – 
Could anyone please clarify how to correctly use Polymer and Bootstrap together?
Thank you in advance.

[joesim...@gmail.com]

Hi Andrii,

This is my problem also. Did you find a solution for this so far?

[anilk...@gmail.com]

Hi, 

Can you please share the solution if you figured out a way to get bootstrap js working with Polymer?