将 bootstrap.js 导入到 lit-element 组件中答案

【问题标题】：Import bootstrap.js into lit-element component将 bootstrap.js 导入到 lit-element 组件中
【发布时间】：2020-02-06 01:11:06
【问题描述】：

我有一个 lit-element 组件可以正确呈现引导下拉菜单，但是当单击下拉菜单时，菜单不会出现。我意识到这是一个javascript问题，但是我不清楚如何解决这个问题。我在我的 index.html 文件中导入引导包 js。我正在链接到组件中的引导 css。

在我的 index.html 文件中

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

在我的 lit-element 组件的渲染中，我拥有

 <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">

再次，由于一切都正确呈现，因此可以识别 css。该问题与下拉菜单的操作有关。

更新为包含每个评论请求的组件代码：

import { html } from 'lit-element';
import { PageViewElement } from './page-view-element.js';
import { connect } from 'pwa-helpers/connect-mixin.js';

// This element is connected to the Redux store.
import { store } from '../store.js';

// These are the actions needed by this element.
import { increment, decrement } from '../actions/counter.js';
import '@polymer/paper-input/paper-input.js'
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';


// These are the shared styles needed by this element.
import { SharedStyles } from './shared-styles.js';
class MyComponent extends connect(store)(PageViewElement) {
  static get properties() {
    return {
    };
  }

  constructor() {
    super();
  }

  static get styles() {
    return [
      SharedStyles
    ];
  }

  firstUpdated(){}

  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">
      <section>
        <form onsubmit="return false">
          <div class="form-row">
            <div class="form-group col-sm-4">
              <div class="input-group mb-3">
                <input id=“my-input“ type="text" class="form-control">
              </div>
          </div>
          <div class="form-row">
            <div class="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>
            </div>
          </div>
        </form>
      </section>
      <section>
    </section>
    `;
  }
}

window.customElements.define('my-component', MyComponent);

任何帮助将不胜感激。

【问题讨论】：

您能否展示如何将您的 lit-element 组件包含到页面中以及组件的内容中？
我已经更新了上面的描述以包含组件代码。如果您需要更多信息，请告诉我
有一个引导 lit-element 组件库github.com/nik-christou/lit-element-bootstrap 为什么不使用它，或者至少看看如何更正确地使用它
感谢您指出这一点。我会看一下代码，但仍然希望在这里从社区获得答案，因为其他人可能会发现深入了解这种常见的用例很有价值。
只是想弄清楚这是否可能。我看到 JS 框架的成熟度和可用的 Web 组件之间存在差距。如果我可以导入现有的 JS 框架，那么过渡到 lit 会更容易。如果不是，那么我希望这个问题的答案能够说明这一点。

标签： twitter-bootstrap polymer lit-element

【解决方案1】：

可悲的是，我不能只发表评论……而且我的答案实际上还不够大，无法作为答案而不是评论发表。

但是您是否尝试过在您的主 html 中添加类似 usall 的样式表，并且只是将相应的引导类添加到您的 lit-element.xml 中的元素。（我只是从你的问题中复制链接，所以我不保证这些工作）

index.html:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<your-element></your-element>

你的元素.js：

render() {
    return html`
      <p class="badge badge-secondary"></p>

`

希望这会有所帮助...

【讨论】：