Twitter bootstrap 将bootstrap.js导入lit元素组件

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

在我的index.html文件中

在我的照明元素组件的渲染中

同样，css是可以识别的，因为所有内容都正确呈现。该问题与下拉菜单的操作有关

已更新以包含每个注释请求的组件代码：

从'lit element'导入{html}；
从“./page view element.js”导入{PageViewElement}；
从“pwa helpers/connect mixin.js”导入{connect}；
//此元素连接到Redux存储。
从“../store.js”导入{store}；
//这些是此元素所需的操作。
从“../actions/counter.js”导入{increment，decrement}；
导入“@polymer/paper-input/paper-input.js”
导入“@polymer/paper dropdown menu/paper dropdown menu.js”；
导入“@polymer/paper item/paper item.js”；
导入“@polymer/paper listbox/paper listbox.js”；
//这些是此元素所需的共享样式。
从“./shared styles.js”导入{SharedStyles}；
类MyComponent扩展连接（存储）（PageViewElement）{
静态获取属性（）{
返回{
};
}
构造函数（）{
超级（）；
}
静态获取样式（）{
返回[
共享样式
];
}
第一次更新（）{}
render（）{
返回html`
下拉按钮
`;
}
}
window.customElements.define（'my-component'，MyComponent）；

---

任何帮助都将不胜感激。

遗憾的是，我不能发表评论。。我的答案实际上不够大，不能作为答案而不是评论发表

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

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>

your-element.js：

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

`

render（）{
返回html`

`

---

希望这对您有所帮助……

您能展示一下如何将lit元素组件包含到页面和组件的内容中吗？我已经更新了上面的描述，以包含组件代码。如果您需要进一步的信息，请告诉我有一个引导lit元素组件库，您为什么不使用它，或者至少看看如何更进一步我会看一看代码，但仍然希望从社区中得到答案，因为其他人可能会发现对这种常见用例的洞察是有价值的。我只是想弄清楚这是否可能。我看到JS框架和可用web组件的成熟度之间存在差距。如果可以，我会如果导入现有的JS框架，那么向lit的转换将更容易。如果不是，那么我希望对这个问题的回答能够清楚地说明这一点。