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

【问题标题】：lit-element styles within html template versus static styles getter?html模板中的lit-element样式与静态样式getter？
【发布时间】：2019-05-23 23:56:00
【问题描述】：

鉴于以下代码和 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 有多糟糕？

【问题讨论】：

标签： lit-element lit-html

【解决方案1】：

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

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

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

您可以通过使用更多/不同的插件来获得这些：

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

你应该总是在这里找到最新列表https://open-wc.org/developing/ide.html#plugins

【讨论】：