Question

我试图创建一个影子DOM来封装内容Script元素，然后应用Bootstrap样式，并使Bootstrap Modal在影子Dom内工作，以便它可以从网页样式和脚本中封装自身。它可以成功显示内容，但是Bootstrap js脚本不起作用。

我尝试将所有样式和脚本文件注入Shadow DOM中。 Bootstrap样式有效，Bootstrap脚本无效

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

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

我认为错误是因为Bootstrap脚本无法像平常那样访问元素。

我相信，由于访问元素的方式已更改，因此这些脚本文件不起作用。

我是对的吗？有没有办法解决这个问题

Answer 1

如果您仍然想使用Shadow DOM，解决方法是将Bootstrap UI元素放在浅DOM中，然后在Shadow DOM中插入with。

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>

影子dom内部无法使用Bootstrap JS的替代方法

1 个答案: