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.

Arabela

Hi @Daryn, please take a look at thednp.github.io/bootstrap.native, and the example for integrated LitElement with Bootstrap Native at: medium.com/lightbaseio/bootstrap-4-lit-element-37c857a6bcca. – Magnesite

Answer 1

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`
      `
    ];
  }

Tropical

Does this end up importing the CSS multiple times, once for each component? – Conglobate

@JudahGabrielHimango -- no, but... Because it's a static method, it is only called once per component class. But if you create a lot of classes (we have 400 in my project) and have a lot of large stylesheets, it can be so slow as to crash the browser. Thus my project computes globalStyle once, saves it and then returns that for each class. (Also note, you must filter out @import and @charset rules). – Balling

Answer 2

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://mcmap.net/q/1324868/-how-to-implement-bootstrap-navbar-as-component-in-lit-html-lit-element

You can see the needed method that createRenderRoot().

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

Refute

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. – Merlon

Note -- that this switches your element from ShadowDOM to normal DOM which might be okay but likely also will cause problems. – Balling

Answer 3

const globalSheets = Array.from(document.styleSheets)
      .map(x => {
        const sheet = new CSSStyleSheet();
        const css = Array.from(x.cssRules).map(rule => rule.cssText).join('\n');
        sheet.replaceSync(css);
        return sheet;
      });        

const styles: CSSResultGroup = [
globalSheets,
css``
];

make sure to you have not used any external file, otherwise this will give cors error

Nikitanikki

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Modestia

Answer 4

A few things:

1. 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.
2. 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.
3. 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.
4. 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

Eclat

what do you loose by giving up shadow dom? will two-way binding still work? – Gibber

Two-way binding still works -- I have a large site where most Lit custom-elements use regular, not Shadow DOM. The issue is that the main innerHTML for the custom-element is constantly being modified. This means that elements like Wysiwig editors (which read and store the innerHTML) end up storing the rendered not original source. – Balling