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>
Steps to reproduce:
- Click "Set Date" button -> attrbiute was changed and input received new value
- Click "Set Date" button -> attrbiute was changed and input received new value
- Type something in the input field
- Click "Set Date" button -> attrbiute was changed, new value was displayed in the console but input didn't received new timestamp
If somebody has the same issue:
.should be used to bind value property.i.e.
<input .value=${this.dt}>More details here