3

我想在 Bootstrap 中使用 Lit-Element。

目前我只是按照这里的建议导入了外部依赖项：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)

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

4

3 回答 3

5

您可以在获取样式中执行此操作，此代码提取全局样式并将其附加到 shadowdom，因此组件会编辑引导程序，如果您想要其中的样式，您可以覆盖

  static get styles() {
    const { cssRules } = document.styleSheets[0]
    const globalStyle = css([Object.values(cssRules).map(rule => 
    rule.cssText).join('\n')])
    return [
      globalStyle,
      css`
      `
    ];
  }
于 2021-04-01T19:54:00.930 回答
0

一些东西：

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

祝你好运

于 2019-03-30T02:04:21.583 回答
0

如果您尝试使用引导 css 和 js 功能。您可以在下面的链接中查看此答案。通过这种方式，您可以轻松地将它们一起使用。

https://stackoverflow.com/a/58462176/7921741

你可以看到需要的方法createRenderRoot()。

class ElementName extends LitElement {
    createRenderRoot() {
        return this;
    }
}
于 2021-12-21T14:09:48.623 回答