Bootstrap 4 如何将引导与Lit元素一起使用？

我想使用带有引导的Lit元素

目前，我只导入了此处建议的外部依赖项：

是否有更好的方法导入这些第三方从属关系

以下是我的组件：

import { LitElement, html, css } from "../../../third-party-libs/lit-element.js"

class LoginError extends LitElement {
  static get properties() { 
    return { 
      show: { type: Boolean, reflect: true }
    }
  }

  static get styles() {
    return css`
      div {
        color: red;
      }
      .hide-me {
        visibility: hidden
      }
    `;
  } 

  constructor() {
    super();
    this.show = false
  }

  render(){
    return html`
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


      <div class="invalid-credentials mb-3 animated ${ this.show ? "shake" : "hide-me"}">
        Invalid credentials, please try again
      </div>
    `
  }
}

customElements.define('login-error', LoginError)

从“../../../third party libs/lit element.js”导入{LitElement，html，css}
类登录错误扩展了LitElement{
静态获取属性（）{
返回{
显示：{type:Boolean，reflect:true}
}
}
静态获取样式（）{
返回css`
div{
颜色：红色；
}
.把我藏起来{
可见性：隐藏
}
`;
} 
构造函数（）{
超级（）；
this.show=false
}
render（）{
返回html`
凭据无效，请重试
`
}
}
customElements.define（'login-error'，LoginError）

如果您能就如何清理这个问题以及如何与多个组件共享此代码提供任何建议，我将不胜感激

有几件事：

ShadowDOM只封装DOM和CSS，而不封装JavaScript。因此，将JavaScript放入组件的DOM中可能不是最好的选择

几个CSS库只有在首先加载到页面上，然后再加载到ShadowDOM中的情况下才能在ShadowDOM中工作。尤其是在加载外部字体时

如果您在使用LIT时遇到问题，您可能希望快速尝试制作一个普通的jsweb组件，以确保库不会妨碍您。然后，一旦工作正常，将其转换回LIT

请记住，您不需要编写Web组件来测试ShadowDOM。您可以使用常规JS向任何元素添加shadowRoot，并在shadowDOM中使用CSS和字体进行测试

---

祝您好运

您可以在get styles中执行此操作，这段代码提取全局样式并将其附加到shadowdom中，这样组件就可以重新编辑引导，如果您想在其中覆盖样式，就可以覆盖它

  static get styles() {
    const { cssRules } = document.styleSheets[0]
    const globalStyle = css([Object.values(cssRules).map(rule => 
    rule.cssText).join('\n')])
    return [
      globalStyle,
      css`
      `
    ];
  }

---

您好@Daryn，请看一看，集成LitElement与Bootstrap Native的示例位于：。