我有一個組件，我想基于一個屬性的樣式/主題。根據(jù)屬性值，我想導(dǎo)入不同的樣式表/css模塊。

理想情況下，它應(yīng)該是這樣的

import module1 from 'css-module1.js'
import module2 from 'css-module2.js'

@customElement('component')
export class Component extends LitElement {
  static styles = attribute ? [module1] : [module2]

  @property({reflect: true})
  attribute = <value>

  <rest of file>
}

我看到的一切都表明基于動態(tài)屬性的css只適用于

static styles = css`
  :host([attribute]) { <css> }
`

可以根據(jù)屬性動態(tài)分配樣式嗎？樣式表太大，實際上無法將多個基于屬性的副本放入文件本身。

這個問題可以通過使用lit.dev styles文檔中的技術(shù)來解決。

您的示例顯示了每個類評估一次樣式的結(jié)果。這是一種高性能的解決方案。然而，您所描述的情況需要基于屬性來改變樣式，這對于組件的每個實例可能是不同的。

因此，以下選項可用:

包括一個& ltstyle & gtLit模板中的元素

render() {
  return html`
    <style>
      :host {
        /* Warning: this approach has limitations & performance issues! */
        color: ${myColor}
      }
    </style>
    <div>template content</div>
  `;
}

注意:在元素內(nèi)部計算一個表達(dá)式是低效的。當(dāng)元素中的任何文本發(fā)生變化時，瀏覽器必須重新解析整個元素，從而導(dǎo)致不必要的工作。

通過僅應(yīng)用在& ltstyle & gt元素。例如:

// Static styles that do not change between cases.
 static styles = css`/* ... */`;

 
  render() {
    const module1 = html`<style> :host { color: red; } </style>`;
    return html`${this.attribute ? module1 : module2}`

使用樣式映射或類別映射 使樣式動態(tài)化的另一種方法是向模板中的類或樣式屬性添加表達(dá)式，可以使用classMap和styleMap根據(jù)條件(如this.attribute值)輕松應(yīng)用類或樣式。

閱讀更多關(guān)于它們的內(nèi)容:https://lit . dev/docs/components/styles/# dynamic-classes-and-styles

這可能需要更改從css-module.js導(dǎo)入的內(nèi)容。