html 模板中的 lit-element 样式与静态样式 getter？

Question

给定以下代码和 lit-html vscode 扩展，语法突出显示不适用于静态样式 getter

class MyComponent extends LitElement {

  // SYNTAX HIGHLIGHTING FAILS
  static get styles() {
    return css`
      * {}
    `
  }

  // SYNTAX HIGHLIGHTING WORKS
  render() {
    return html`
      <style>
        * {}
      </style>
    `
  }
}

但是它在渲染函数的 html 模板中确实有效

为了性能，选择渲染函数中的样式而不是静态样式有多糟糕getter？

Answer 1

将样式移动到渲染函数中意味着：

失去所有性能提升（通过使用可构建的样式表获得）
并且它可能会诱使您在其中使用 ${this.foo}（如果你想要高性能或者你想要支持非原生阴影 dom 浏览器）

所以我会说这样做是为了语法高亮是个坏主意。

您可以通过使用 more/different 插件获得这些：

lit-plugin 语法高亮、类型检查和代码 lit-html 的完成（替换 lit-html vscode 扩展名）
vscode-styled-components全部高亮显示您的 css 标记的模板文字（单独添加 css 突出显示 - 例如将其与 lit-html vscode 扩展名结合使用）

您总能在此处找到的最新列表 https://open-wc.org/developing/ide.html#plugins

html 模板中的 lit-element 样式与静态样式 getter？

lit-element styles within html template versus static styles getter?

lit-element

lit-html