Как вы используете Bootstrap с Lit-Element? - PullRequest
Новая
       21

Как вы используете Bootstrap с Lit-Element?

1 голос
/ 28 марта 2019

Я хотел бы использовать Lit-Element с Bootstrap.

В настоящее время я просто импортировал внешние зависимости, как предложено здесь: https://lit -element.polymer-project.org / guide / styles # external-stylesheet

IsЕсть ли лучший способ импортировать эти сторонние зависимости?

Вот мой компонент: 

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)

Буду признателен за любые советы о том, как это исправить, и как поделиться этим кодом снесколько компонентов.

1 Ответ

0 голосов
/ 30 марта 2019

Несколько вещей:

  1. ShadowDOM инкапсулирует только DOM и CSS, а не JavaScript.Поэтому размещение JavaScript в компоненте может быть не самым лучшим решением.
  2. Некоторые библиотеки CSS работают в ShadowDOM только в том случае, если они сначала загружены на страницу, а затем, во-вторых, загружены в shadowDOM.Особенно, если вы загружаете внешние шрифты.
  3. Если у вас возникают проблемы с использованием LIT, вы можете быстро попробовать просто создать ванильный веб-компонент JS, чтобы убедиться, что библиотека не мешает.Затем, когда это сработает, преобразуйте его обратно в LIT.
  4. Помните, что вам не нужно писать веб-компонент для тестирования ShadowDOM.Вы можете использовать обычный JS, чтобы добавить shadowRoot к любому элементу и протестировать, используя CSS и шрифты в этом shadowDOM.

Удачи

...