title: Import bootstrap.js into lit-element component
body: <p>I have a lit-element component that renders the bootstrap dropdown correctly, however when clicking on the dropdown, the menu does not appear. I realize that this is a javascript problem, however I am unclear how to resolve the issue. I am importing the bootstrap bundle js in my index.html file. I am linking to the bootstrap css in the component.</p>
  
  <p>Inside my index.html file I have</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="node_modules/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Inside the render of my lit-element component I have</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt; 
  </code></pre>
  
  <p>Again, the css is recognized since everything renders correctly. The issue is related to the action of dropping the menu down.</p>
  
  <p>Updated to include component code per comment request: </p>
  
  <pre class="lang-html prettyprint-override"><code>import { html } from 'lit-element';
  import { PageViewElement } from './page-view-element.js';
  import { connect } from 'pwa-helpers/connect-mixin.js';
  
  // This element is connected to the Redux store.
  import { store } from '../store.js';
  
  // These are the actions needed by this element.
  import { increment, decrement } from '../actions/counter.js';
  import '@polymer/paper-input/paper-input.js'
  import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
  import '@polymer/paper-item/paper-item.js';
  import '@polymer/paper-listbox/paper-listbox.js';
  
  
  // These are the shared styles needed by this element.
  import { SharedStyles } from './shared-styles.js';
  class MyComponent extends connect(store)(PageViewElement) {
    static get properties() {
      return {
      };
    }
  
    constructor() {
      super();
    }
  
    static get styles() {
      return [
        SharedStyles
      ];
    }
  
    firstUpdated(){}
  
    render() {
      return html`
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
        &lt;section&gt;
          &lt;form onsubmit="return false"&gt;
            &lt;div class="form-row"&gt;
              &lt;div class="form-group col-sm-4"&gt;
                &lt;div class="input-group mb-3"&gt;
                  &lt;input id=“my-input“ type="text" class="form-control"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-row"&gt;
              &lt;div class="dropdown"&gt;
                &lt;button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                   Dropdown button
                &lt;/button&gt;
                &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuButton"&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/section&gt;
        &lt;section&gt;
      &lt;/section&gt;
      `;
    }
  }
  
  window.customElements.define('my-component', MyComponent);
  </code></pre>
  
  <p>Any help would be appreciated.</p>