Bootstrap JS的替代品在shadow dom中不起作用

Question

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

我尝试将所有样式和脚本文件注入到影子DOM中。 引导样式有效，引导脚本不起作用

$(#id) //the usual way to access a id using jQuery
parentofShadowtree.shadowRoot.querySelector('#id') //to select a element inside shadow DOM

我认为错误是因为引导脚本无法像往常一样访问元素。

我相信由于访问元素的方式发生了变化，这些脚本文件不起作用。

我说的对吗？有没有办法克服这个问题

Answer 1

如果您仍然想使用 Shadow DOM，解决方法是将 Bootstrap UI 元素放在 light DOM 中，然后插入 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>