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>
    `
  }
}

但是它确实可以在render函数的html模板中工作

在渲染功能上选择样式而不是静态样式获取器对性能有多糟糕？

Answer 1

将样式移动到render函数将意味着：

失去所有性能提升（通过使用可构造的样式表即可获得）
，它可能会诱使您在其中使用${this.foo}（如果您想表现出色还是要支持非本地阴影dom 浏览器）

所以我要说这样做对语法高亮显示是个坏主意。

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

lit-plugin语法突出显示，类型检查和代码 lit-html的完成（替换lit-html vscode扩展名）
vscode-styled-components突出显示所有您的CSS标签模板文字（添加单独的CSS高亮显示-例如，将其与lit-html vscode扩展名相结合）

最新列表，您应该始终在这里https://open-wc.org/developing/ide.html#plugins

html模板中的照明元素样式与静态样式getter？

1 个答案: