如何将 CSS 框架与 LitElement 结合使用

Question

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

因此，我将整个 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";
}
`