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

【问题标题】：Alternatives to Bootstrap JS does not work inside shadow domBootstrap JS 的替代品在 shadow dom 中不起作用
【发布时间】：2019-11-23 03:00:46
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

你是对的。不要将 Shadow DOM 与 Boostrap 脚本一起使用。为了克服这个问题，也许你可以重载 querySelector 方法，但我没有尝试过。
@Supersharp 我想这对我来说太难了，所以决定不使用 shadow dom。

标签： google-chrome-extension shadow-dom content-script

【解决方案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>

【讨论】：

这就是我想要的。惊人的！将通过解决方案
我遇到了类似的问题 - stackoverflow.com/questions/60795202/…。你能帮忙吗？
@methuselah 抱歉，我不太了解 Angular，但我想您应该将元素放在 light dom 中（如上所述）
那么，它会加载两次引导程序的样式吗？
没关系，我刚刚测试过它只加载一次