0

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.

Inside my index.html file I have

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Inside the render of my lit-element component I have

 <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">

Again, the css is recognized since everything renders correctly. The issue is related to the action of dropping the menu down.

Updated to include component code per comment request: 

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`
    <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">
      <section>
        <form onsubmit="return false">
          <div class="form-row">
            <div class="form-group col-sm-4">
              <div class="input-group mb-3">
                <input id=“my-input“ type="text" class="form-control">
              </div>
          </div>
          <div class="form-row">
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Dropdown button
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
        </form>
      </section>
      <section>
    </section>
    `;
  }
}

window.customElements.define('my-component', MyComponent);

Any help would be appreciated.

Paul Mazzuca
  • 567
  • 1
  • 5
  • 19
  • 1
    Can you show how you include your lit-element component into page and the comopnent's content? – Danny Matkovsky Oct 09 '19 at 14:49
  • I have updated the description above to include the component code. Let me know if you need further information – Paul Mazzuca Oct 09 '19 at 23:39
  • There is a library of bootstrap lit-element components https://github.com/nik-christou/lit-element-bootstrap Why don't you use that or at least have a look how to do it more properly – Danny Matkovsky Oct 10 '19 at 14:46
  • Thanks for pointing that out. I will take a look at the code, but was still hoping to get an answer from the community here, given that others might find insight into such a common use case valuable. – Paul Mazzuca Oct 10 '19 at 15:55
  • Do you really need shadow dom for this element? Because jQuery isn't really gonna render anything in your shadow root, at least considering the way web components work today – Tsortanidis Christos Oct 19 '19 at 07:13
  • 1
    Just trying to figure out if this is possible. I see a gap between the maturity of JS frameworks and web components available. If I could import existing JS frameworks then the transition to lit would be easier. If not, then I am hoping that an answer to the question will make that clear. – Paul Mazzuca Oct 22 '19 at 14:42

1 Answers1

0

Sadly i cannot just comment.. and my answer isnt actually big enough to be postet as an answer rather than a comment.

But have you tried to add the stylesheet like usall on your main html and to just add the corresponding bootstrap-classes to the elements in your lit-element. (im just copying the links from your question so i dont guarantee that these work)

index.html:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<your-element></your-element>

your-element.js:

render() {
    return html`
      <p class="badge badge-secondary"></p>

`

Hope this helps...

coding_cate
  • 71
  • 5