如何将 Bootstrap 与 Lit-Element 一起使用？

Question

我想将 Lit-Element 与 Bootstrap 结合使用。

目前我只是按照此处的建议导入了外部依赖项：https://lit-element.polymer-project.org/guide/styles#external-stylesheet

是否有更好的方法来导入这些第 3 方依赖项？

这是我的组件：

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)

如果有任何关于如何清理它以及如何与多个组件共享此代码的建议，我将不胜感激。

Answer 1

一些事情：

ShadowDOM只封装了DOM和CSS，没有封装JavaScript。因此，将 JavaScript 放入组件的 DOM 中可能不是最好的做法。
几个 CSS 库只能在 ShadowDOM 中工作，前提是它们首先加载到页面上，然后再加载到 shadowDOM 中。特别是如果您正在加载外部字体。
如果您运行在使用 LIT 时遇到问题，您可能想快速尝试制作一个普通的 JS Web 组件，以确保该库不会妨碍您。然后，一旦它起作用，将其转换回 LIT。
请记住，您不需要编写 Web 组件来测试 ShadowDOM。您可以使用常规 JS 将 shadowRoot 添加到任何元素并使用 CSS 和该阴影中的字体进行测试DOM.

祝你好运

Answer 2

您可以在获取样式中执行此操作，此代码提取全局样式并将其附加到 shadowdom，因此组件会重新编辑 bootstrap 如果您想要内部样式，则可以覆盖

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

Answer 3

如果你尝试使用 bootstrap css 和 js 功能。您可以在下方 link 查看此答案。这样，您就可以轻松地将它们一起使用了。

你可以看到createRenderRoot().

需要的方法

class ElementName extends LitElement {
    createRenderRoot() {
        return this;
    }
}

如何将 Bootstrap 与 Lit-Element 一起使用？

How do you use Bootstrap with Lit-Element?

web-component

bootstrap-4

lit-element