javascript - 如何将 CSS 框架与 LitElement 一起使用

Question

我想将 CSS 框架 Bulma 与 LitElement 一起使用。我知道我可以使用 External Stylesheet但是，他们表示这样做是不好的做法。我也有一个问题，我必须将它导入到每个元素中，这感觉不对。

所以我将整个Bulma文件内容复制到一个js模块中，但是导入后样式并没有应用。

import { css } from 'lit-element'

export default css`
@-webkit-keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
...

将样式作为链接标签导入是可行的，但如上所述是不好的做法。

import { LitElement, html, css } from 'lit-element'
import './src/table.js'
import styles from './styles.js'

class LitApp extends LitElement {
  constructor() {
    super()
    this.tHeader = ['status', 'name', 'alias']
    this.data = [
      ['connect', 'john', 'jdoe'],
      ['disconnect', 'carol', 'carbon'],
      ['disconnect', 'mike', 'mkan'],
      ['disconnect', 'tina', 'tiba'],
    ]
  }
  static get styles() {
    return [
      styles, // does not work
      css`
      :host { 
        padding: 5vw;
        min-height: 100vh;
      }
      table.table {
        width: 100%;
      }`
    ] 
  }
  render() {
    return html`
      <link rel="stylesheet" href="./node_modules/bulma/css/bulma.min.css">
      <div class="columns">
        <div class="column is-8 is-offset-2">
          <div class="card">
            <div class="card-content">
              <agent-table .theader=${this.tHeader} .data=${this.data}></agent-table>
            </div>
          </div>
        </div>
      </div>`
  }
}

customElements.define('lit-app', LitApp)

此外，表格没有收到样式，我不得不再次导入文件，我想避免这种情况。

class AgentTable extends LitElement {
  constructor() {
    super()
    this.tHeader = []
    this.data = []
  }
  static get properties() {
    return { 
      theader: { type: Array },
      data: { type: Array },
    }
  }
  render() {
    return html`
        <table class="table is-narrow">
        <thead>
          <tr>${this.tHeader.map((header) => html`<td class="is-capitalized">${header}</td>`)}</tr>
        </thead>
        <tbody>
          ${this.data.map((row) => html`<tr>
            ${row.map((cell) => html`<td class="is-capitalized">${cell}</td>`)}
          </tr>`)}
        </tbody>`
  }
}

customElements.define('agent-table', AgentTable)

我通常很难找到应用 CSS 框架的好方法。我在这个页面上来回阅读 https://lit-element.polymer-project.org/guide/styles但我没有让它工作。

抱歉，如果这有点模棱两可或难以理解，我很难正确地表达这个问题。

Answer 1

使用链接标签导入样式存在一些问题。这就是为什么这是一个不好的做法:

每次创建元素实例时都会创建一个新样式表。 LitElement 使用可构造的样式表(如果支持)在所有元素之间共享一个样式表实例。

样式表是在元素渲染后加载的，所以可能会有一个 flash-of-unstyled-content

ShadyCSS polyfill 不起作用

href 属性相对于主文档

将几千个 css 规则添加到只需要几个的自定义元素中，这不是它的本意。 CSS 框架应该由自定义元素分割。

也就是说，你可以做你在那里做的事情，并将整个 Bulma 复制到一个 js 模块中。问题在于您必须转义该 CSS 的字符“”。

css`
.breadcrumb li + li::before {
  color: #b5b5b5;
  content: "\0002f";
}
`

这不会按预期工作，但不会失败，因为模板文字允许您在输入原始字符串时读取它们，而无需处理转义序列。所以没有任何JS错误。
逃避那些，它会没事的:

css`
.breadcrumb li + li::before {
  color: #b5b5b5;
  content: "\\0002f";
}
`