Question

我想在Bootstrap中使用Lit-Element。

目前，我已按照此处的建议简单地导入了外部依赖关系：https://lit-element.polymer-project.org/guide/styles#external-stylesheet

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

这是我的组成部分：

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，因此组件会重新编辑引导程序，如果您想要其中的样式，您可以覆盖

# A tibble: 8 x 3
#  N1        Outcome1 Outcome2
#  <chr>     <chr>    <chr>   
#1 "#7"      #7       7       
#2 "#7 #8"   #7, #8   7, 8    
#3 "#7,#8"   #7, #8   7, 8    
#4 "#07"     #7       7       
#5 "#/7"     #7       7       
#6 "#/\\7"   #7       7       
#7 "#7#8"    #7, #8   7, 8    
#8 "7 and 8" #7, #8   7, 8

Answer 2

几件事：

ShadowDOM仅封装DOM和CSS，而不封装JavaScript。因此，将JavaScript放入组件中可能不是最好的选择。
几个CSS库仅在首先加载到页面上，然后加载到shadowDOM中的情况下，才可以在ShadowDOM中使用。尤其是在加载外部字体时。
如果您在使用LIT时遇到问题，则可能希望快速尝试仅制作一个普通的JS Web组件，以确保该库不会妨碍您的操作。然后，一旦可行，将其转换回LIT。
请记住，您无需编写Web组件即可测试ShadowDOM。您可以使用常规JS将shadowRoot添加到任何元素，并在该shadowDOM中使用CSS和字体进行测试。

祝你好运

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

2 个答案: