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

Question

我尝试创建一个阴影 DOM 来封装内容脚本元素，然后应用 Bootstrap 样式并使 Bootstrap 模式在阴影中工作 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 元素放在 light DOM 中，然后在 Shadow 中插入 with 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>

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

Alternatives to Bootstrap JS does not work inside shadow dom

google-chrome-extension

content-script

shadow-dom