0

I'm trying to use Bootstrap in a LitElement component. I included all the boostrap assets. Theoretically, it should work. I'm wondering why it doesn't (the button doesn't open the card).

class myShadowModule extends LitElement{
    constructor(){
        super()
    }
    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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Click me
        </a>
    </p>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            card opened
        </div>
    </div>`;
    }

}
customElements.define('my-shadow-module', myShadowModule);
alfredopacino
  • 2,979
  • 9
  • 42
  • 68

1 Answers1

2

First of all, the <script> tags in your example won't be run due to the way that lit-html appends content to the DOM, so you shouldn't be seeing the Bootstrap dependencies actually requested.

Further, if the Bootstrap dependencies in your example were available, they will attempt some form of document.querySelector('.collapse') and be unable to locate the element in question because it is encapsulated in the Shadow DOM of your LitElement. In cases where you can feed an element into an API, i.e.

    const elementReference = this.shadowRoot.querySelector('.collapse');
    startCollapseWith(elementReference);

it is possible to graft light DOM solutions to shadow DOM trees, but I've not seen a version of Bootstrap that surfaces this sort of API. Maybe it exists somewhere?

There have been some great conversations over the years of moving the Bootstrap default implementation over to web components: https://github.com/twbs/bootstrap/issues/28131 and https://github.com/twbs/bootstrap/issues/18015 and https://github.com/twbs/bootstrap/issues/14200 but you'll be able to learn via those issues the current state of that. UI components, especially in the case of things like Bootstrap that is not heavily invested in a specific framework (if you exclude JQuery), are a brilliant use case for web components, I hope to see this path forward for the library gain steam as they target new versions.

Westbrook
  • 608
  • 5
  • 9