How to style dynamically in lit?

May 15, 2022

Good time
How to style dynamically in lit?
My main goal is to change the color of an element according to the user’s input in the input element.

My code screen shoot

>Solution :

You can’t use ‍${} in lit css tag function!

But you can select element and then change style

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

Also read:
Dynamic classes and styles | Lit Doc

Use CSS variable in Lit