I am working on a network graph editor with an inspector view on the right side. The inspector is a separate web component built with Lit. When I click on a node I would like to be able to view and change properties of the node, like the node title, in the inspector view. That works well as long as I don't change any value in the input field. Once I changed the value the input field keeps it's manual value even if set a new value during re-rendering.

To provide an example. This is how the web inspector of Safari shows the HTML element:

If I now change the node value it looks like this:

Now, I change to the second node I get this:

As you can see, the value attribute changed, even the id is different. However, Safari (and Chrome), keep the existing value, hence showing me the wrong title for the second node.

The input field shows the node's value each time, as long as I don't change the value manually. After that the input field maintains the manually set value.

The corresponding line in render() is

<input id="text_${this.currentElement.id}" value="${this.currentElement.text}"/>

I specifically change the id but that has no impact on the result.

What do I need to do in order to 'loose' the manual value during re-rendering? Many thanks in advance!