javascript - 如何将 CSS 框架与 LitElement 一起使用
问题描述
我想将 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但我没有让它工作。
抱歉,如果这有点模棱两可或难以理解,我很难正确地表达这个问题。
解决方案
使用链接标签导入样式存在一些问题。这就是为什么这是一个不好的做法:
- 每次创建元素实例时都会创建一个新样式表。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";
}
`
推荐阅读
- python-2.7 - 无法侦听错误:无法在 0.0.0.0:25060 上侦听:[Errno 98] 地址已在使用中
- c++ - __stdcall 的优点/用途是什么?
- spring-boot - Spring Boot 集成到 Apache NIFI
- oracle - 从 ref_curor 获取数据时,它显示如下错误错误(51,59):PLS-00302:必须声明组件“NOOFRECORDS”
- python-3.x - 从 Lambda 函数运行 .ipynb 文件
- angular - 季度日期选择器
- java - java或python中的密码保护文件夹或目录
- common-lisp - 了解对 funcall 和 Lisp 评估规则的需求
- firebase - 如何将多态文档存储在 Firestore 的同一集合中?
- mongodb - 如何从 mongo db 的单个文档中的文档和子文档中获取特定字段