时间戳

首页 > 解决方案 > Bootstrap JS 的替代品在 shadow dom 中不起作用

google-chrome-extension - Bootstrap JS 的替代品在 shadow dom 中不起作用

问题描述

我尝试创建一个 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

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

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

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

标签： google-chrome-extensionshadow-domcontent-script

解决方案

如果您仍想使用 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>

推荐阅读