0

LitElement コンポーネントで Bootstrap を使用しようとしています。すべてのブーストラップ アセットを含めました。理論的には、うまくいくはずです。なぜそうしないのだろう（ボタンでカードが開かない）。

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);
4

1 に答える 1

2

まず、<script>lit-html がコンテンツを DOM に追加する方法が原因で、例のタグが実行されないため、実際に要求された Bootstrap の依存関係が表示されないはずです。

さらに、例の Bootstrap 依存関係が利用可能である場合document.querySelector('.collapse')、問題の要素は LitElement の Shadow DOM にカプセル化されているため、問題の要素を見つけることができません。要素を API にフィードできる場合、つまり

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

ライト DOM ソリューションをシャドウ DOM ツリーに移植することは可能ですが、この種の API を表示するバージョンの Bootstrap は見たことがありません。もしかしてどこかに存在する？

Bootstrap の既定の実装を Web コンポーネントに移行することについて、何年にもわたっていくつかの素晴らしい会話がありました: https://github.com/twbs/bootstrap/issues/28131およびhttps://github.com/twbs/bootstrap/issues/ 18015およびhttps://github.com/twbs/bootstrap/issues/14200ですが、これらの問題を通じて現在の状態を知ることができます。UI コンポーネント、特に特定のフレームワーク (JQuery を除外する場合) にあまり投資されていない Bootstrap のようなものの場合、Web コンポーネントの素晴らしいユース ケースです。新しいバージョンをターゲットにします。

于 2019-10-09T03:27:07.170 に答える