javascriptlit-elementlitlit-html

LitElement does not update when attribute changed

I have very simple Lit component with an attribute.

I can change this attribute outside and Lit component receives new value and can display it, for example in the <input> tag.

This operation works as many times as I change the attribute. Problem occurs when I change the value manually in the <input>.

Component looks like this:

cmp.ts

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

@customElement('cmp-tmp')
export class CmpTmp extends LitElement {
  
  @property({ type: Number })
  dt = 0;

  public render() {
    
    return html`
        <input value=${this.dt}>`;
  }
}

index.html

<!DOCTYPE html>
<head>
  <script type="module" src="./cmp.js"></script>
</head>
<body>
  <cmp-tmp dt=""></cmp-tmp>
  <button onclick="document.querySelector('cmp-tmp').setAttribute('dt', Date.now())">Set Date</button>
</body>

Playground

Steps to reproduce:

  1. Click "Set Date" button -> attrbiute was changed and input received new value
  2. Click "Set Date" button -> attrbiute was changed and input received new value
  3. Type something in the input field
  4. Click "Set Date" button -> attrbiute was changed, new value was displayed in the console but input didn't received new timestamp
Solution

  • If somebody has the same issue: . should be used to bind value property.

    i.e. <input .value=${this.dt}>

    More details here