google chrome extension - Alternatives to Bootstrap JS does not work inside shadow dom

Question

I tried to create a shadow DOM for encapsulating the content Script elements and then apply Bootstrap styles and also make Bootstrap Modal work inside a shadow Dom so it can encapsulate itself from the Webpage styles and Scripts. It is successful in displaying the content but Bootstrap js scripts don't work.

I tried injecting all the Styles and Script files inside the Shadow DOM. Bootstrap Styles work, Bootstrap Scripts don't work

$(#id) //the usual way to access a id using jQuery

parentofShadowtree.shadowRoot.querySelector('#id') //to select a element inside shadow DOM

I think the error is because the Bootstrap scripts are not able to access the elements as they usually would.

I believe since the way of accessing elements has changed, these script files doesn't work.

Am I right? Is there a way to overcome this problem

Answer 1

If you still want to use Shadow DOM the workaround is to put the Bootstrap UI elements in the light DOM and then insert then with in the Shadow DOM.

customElements.define( 'c-e', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `
                <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">
                <button class="btn btn-primary">CSS Only</button>
                <slot name="dropdown"></slot>`
    }
    connectedCallback() {
        this.innerHTML = `<section slot="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>
            </section>`
    }
} )

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<c-e></c-e>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>