Intenté crear una sombra DOM para encapsular los elementos de script de contenido y luego aplicar los estilos de bootstrap y también hacer que el trabajo modal de bootstrap dentro de una sombra dom para que pueda encapsularse de los estilos y scripts de la página web. Es exitoso en mostrar el contenido, pero los scripts de Bootstrap JS no funcionan.

Intenté inyectar todos los estilos y archivos de script dentro de la sombra DOM. Los estilos de bootstrap funcionan, los scripts de bootstrap no funcionan

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

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

Creo que el error se debe a que los scripts de bootstrap no pueden acceder a los elementos, ya que usualmente lo harían.

Creo que ya que la forma de acceder a los elementos ha cambiado, estos archivos de script no funcionan.

¿Estoy en lo cierto? ¿Hay alguna manera de superar este problema?

8
vba 13 jul. 2019 a las 22:39

1 respuesta

La mejor respuesta

Si aún desea usar la Sombra DOM, la solución es colocar los elementos de UI de Bootstrap en el Dom Light y luego insertarlo con la sombra 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>
7
Supersharp 15 jul. 2019 a las 15:57