css - 如何在lit中动态设计风格？

Question

美好时光 如何在lit中动态设计风格？ 我的主要目标是根据用户在输入元素中的输入来更改元​​素的颜色。

My code screen shoot

Answer 1

在lit css标签函数中不能使用‍${}!

但是您可以选择元素然后更改样式

import {html, css, LitElement} from 'lit';
import {customElement, property, query} from 'lit/decorators.js';

@customElement('dynamic-style')
export class DynamicStyle extends LitElement {
  static styles = css`
    label {
      color: #023047;
    }
  `;

  @property()
  color: string;

  @query('input') input: HTMLSelectElement | undefined;
  @query('label') label: HTMLSelectElement | undefined;

  render() {
    return html`
      <label for="color-input">HEX color: </label>
      <input id="color-input" placeholder="#023047" />
    `;
  }

  firstUpdated() {
    this.input.addEventListener('input', () => {
      this.label.style.color = this.input.value;
    });
  }
}

lit playground

另请阅读: Dynamic classes and styles | Lit Doc

Use CSS variable in Lit