стили лит-элементов в шаблоне html или статические стили - PullRequest
Новая
       34

стили лит-элементов в шаблоне html или статические стили

0 голосов
/ 24 мая 2019

с учетом следующего кода и расширения lit-html vscode, подсветка синтаксиса не работает для получения статических стилей 

class MyComponent extends LitElement {

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

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

однако он работает в HTML-шаблоне в функции рендеринга

насколько плохо для производительности выбор стилей в функции рендеринга вместо статического метода получения стилей?

1 Ответ

1 голос
/ 25 мая 2019

Перемещение стилей в функцию рендеринга будет означать:

  • потеряет все приросты производительности (вы получаете с помощью конструируемых таблиц стилей)
  • , и это может соблазнить вас использовать ${this.foo}внутри него (что является плохой идеей, если вы хотите быть производительным или хотите поддерживать не родные браузеры теневого домена)

Так что я бы сказал, что это плохая идея для подсветки синтаксиса.

Вы можете получить их, используя больше / разные плагины:

  • lit-plugin Подсветка синтаксиса, проверка типов и завершение кода для lit-html (заменяет lit-html расширение vscode)
  • vscode-styled-components Подсвечивает все литералы шаблона с тегами css (добавляет только выделение css - например, объединяет его, например, с расширением lit-html vscode)

Актуальный список, который вы всегда можете найти здесь https://open -wc.org / развивающихся / ide.html # plugins

...