无法在自定义元素的 Shadow Root 中使用 Bootstrap

Question

我正在使用纯 javascript 创建 Web 组件并使用 Bootstrap 5 进行样式设置。 bootstrap 样式工作正常，但 bootstrap 下拉列表的事件监听器不工作。

我把bootstrapjavascript的内容封装在script标签里，放到了shadowroot里面。

我是网络组件和影子根的新手。我不确定在 shadow root 中使用 bootstrap 是否是一个好方法。

提前致谢！

请找到以下代码供您参考。

网络-component.js

const template = document.createElement('template');

template.innerHTML = `
    <style>
        @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css");
    </style>
    <div class="container-fluid">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
`;
class WebComponent extends HTMLElement {
    constructor(){
        super();
        this.attachShadow({ mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));

        const scriptElement = document.createElement('script');
        scriptElement.src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js";
        scriptElement.integrity = "sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0";
        scriptElement.crossorigin = "anonymous";
        this.shadowRoot.appendChild(scriptElement);
    }
}

window.customElements.define('b-comp', WebComponent);

sample.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dummy Web Component</title>
</head>

<body>
    <b-comp></b-comp>

    <script src="web-component.js"></script>
</body>

</html>

在输出中，按钮是使用正确的 bootstrap 样式创建的，但是单击它时没有任何反应。

Answer 1

TLDR; It is not possible with what you are trying to do.

bootstrap 将无法响应阴影 DOM 中发生的事件。零零碎碎的都有解决方案。

对于具有 Shadow DOM 的同一组件的多个实例共享 CSS，您可以考虑使用 Constructible Stylesheets。

要使用 bootstrap 的 JavaScript，您必须依赖 Light DOM 。但是当你有组件组合时，这将不起作用。想象一下，在另一个具有自己的 Shadow DOM 并因此具有多层嵌套 Shadow DOM 的 Web 组件中使用您的下拉菜单。你不能保证你的光 DOM 永远不会影响到其他组件的阴影 DOM.

或者，您可以考虑在不使用阴影的情况下构建组件 DOM。

无法在自定义元素的 Shadow Root 中使用 Bootstrap

Not able use Bootstrap within Shadow Root of Custom Elements

javascript

css

web-component

custom-element

bootstrap-5