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

Question

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?

Answer 1

Moving styles into the render function would mean:

• lose all the performance gains (you get by using constructible stylesheets)
• and it might tempt you to use ${this.foo} inside it (which is a bad idea if you want to be performant or if you want to support non native shadow dom browsers)

So I would say it's a bad idea to do this for syntax highlighting.

You can get those by using more/different plugins:

• lit-plugin Syntax highlighting, type checking and code completion for lit-html (replaces lit-html vscode extension)
• vscode-styled-components Highlights all your css tagged template literals (adds css highlighting alone - e.g. combine it for example with lit-html vscode extension)

An up to date list you should always find here https://open-wc.org/developing/ide.html#plugins