Styjun

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.

A few things:

1. ShadowDOM only encapsulates DOM and CSS and not JavaScript. So placing your JavaScript into 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 any element and test using CSS and fonts in that shadowDOM.

Good luck