How do you use Bootstrap with Lit-Element?

Question

I would like to make use of Lit-Element with Bootstrap.

Currently I have simply imported the external dependancies as suggested here: https://lit-element.polymer-project.org/guide/styles#external-stylesheet

Is there a better way to import these 3rd party dependancies?

Here is my component:

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)

I would appreciate any advice on how to clean this up, and how to share this code with multiple components.

Hi @Daryn, please take a look at https://thednp.github.io/bootstrap.native/, and the example for integrated LitElement with Bootstrap Native at: https://medium.com/lightbaseio/bootstrap-4-lit-element-37c857a6bcca. — ThienSuBS, Jul 23 '20 at 03:10

score 8 · Accepted Answer · answered Apr 01 '21 at 19:54

8

You can do this in get styles, this code extract the global style and attach it shadowdom, so the component ereditate the bootstrap and u ca overwrite if u want the style inside

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

answered Apr 01 '21 at 19:54

Roberto Ianes

96
1
2

2

Does this end up importing the CSS multiple times, once for each component? – Judah Gabriel Himango Oct 06 '21 at 01:01

Melih Şen · Answer 2 · 2021-12-21T16:20:58.967

3

If you try to use bootstrap css and js features. You can look this answer at below link. By this way, you can use them together easily.

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

You can see the needed method that createRenderRoot().

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

edited Dec 21 '21 at 16:20

answered Dec 21 '21 at 14:09

Melih Şen

31
3

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Vimal Patel Dec 21 '21 at 15:11
Note -- that this switches your element from ShadowDOM to normal DOM which might be okay but likely also will cause problems. – Michael Scott Asato Cuthbert Feb 22 '22 at 01:50

Intervalia · Answer 3 · 2022-08-24T19:42:19.087

A few things:

ShadowDOM only encapsulates DOM and CSS and not JavaScript. So placing your JavaScript into the DOM of a component may not be the best thing to do.
Several CSS libraries only work in ShadowDOM if they are, first, loaded on the page and then, second, loaded into the shadowDOM. Especially if you are loading external fonts.
If you run into problems using LIT you might want to quickly try just making a vanilla JS Web Component to make sure the library isn't getting in the way. Then, once that is working, convert it back to LIT.
Remember that you do not need to write a Web Component to test ShadowDOM. You can use regular JS to add a shadowRoot to almost any element and test using CSS and fonts in that shadowDOM.

Good luck

what do you loose by giving up shadow dom? will two-way binding still work? — mike01010, Aug 24 '22 at 18:31

How do you use Bootstrap with Lit-Element?

3 Answers3