时间戳

首页 > 解决方案 > Bootstrap 和 LitElement

twitter-bootstrap - Bootstrap 和 LitElement

问题描述

我正在尝试在 LitElement 组件中使用 Bootstrap。我包括了所有的 boostrap 资产。从理论上讲，它应该工作。我想知道为什么它没有（按钮没有打开卡）。

class myShadowModule extends LitElement{
    constructor(){
        super()
    }
    render(){
        return html`
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Click me
        </a>
    </p>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            card opened
        </div>
    </div>`;
    }

}
customElements.define('my-shadow-module', myShadowModule);

标签： twitter-bootstraplit-element

解决方案

首先，<script>由于 lit-html 将内容附加到 DOM 的方式，您的示例中的标签将不会运行，因此您不应该看到实际请求的 Bootstrap 依赖项。

此外，如果您的示例中的 Bootstrap 依赖项可用，它们将尝试某种形式document.querySelector('.collapse')并且无法定位有问题的元素，因为它封装在 LitElement 的 Shadow DOM 中。在您可以将元素输入 API 的情况下，即

    const elementReference = this.shadowRoot.querySelector('.collapse');
    startCollapseWith(elementReference);

可以将轻量级 DOM 解决方案移植到阴影 DOM 树上，但我还没有看到一个版本的 Bootstrap 可以显示这种 API。也许它存在于某个地方？

多年来，在将 Bootstrap 默认实现转移到 Web 组件方面进行了一些精彩的对话：https ://github.com/twbs/bootstrap/issues/28131和https://github.com/twbs/bootstrap/issues/ 18015和https://github.com/twbs/bootstrap/issues/14200但您将能够通过这些问题了解当前状态。UI 组件，尤其是像 Bootstrap 这样没有大量投资于特定框架的东西（如果你排除 JQuery），是 Web 组件的一个很好的用例，我希望看到这个库的前进道路获得动力针对新版本。

推荐阅读