如何在光照中动态设置样式？

Question

好时光如何在光照中动态设置样式？我的主要目标是根据用户在输入元素中的输入更改元素的颜色。

My code screen shoot

Answer 1

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

但是你可以select元素然后改变样式

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
        >Enter HEX color
        <input class="color-input" placeholder="#023047" />
      </label>
    `;
  }

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

lit playground

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

Simply! It is good to search more and then ask

如何在光照中动态设置样式？

How to style dynamically in lit?

css

web-component

lit-element

lit-html

lit