时间戳

首页 > 解决方案 > lit-element styles within html template versus static styles getter?

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

问题描述

given the following code, and the lit-html vscode extension, syntax highlighting doesn't work on the static styles getter

class MyComponent extends LitElement {

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

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

however it does work in the html template in the render function

how bad, for performance, is opting for the styles in the render function, instead of the static styles getter?

标签： lit-elementlit-html

解决方案

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

  • 失去所有的性能提升（你通过使用可构造的样式表获得）
  • 并且它可能会诱使您在其中使用${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

推荐阅读