如何在lit中动态设计样式？

Question

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

Answer 1

在lit css标签功能中不能使用u200d

${}

！

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

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 中使用 CSS 变量