I am facing an issue with reading a property in my web component. I am puzzled as to why it is not working correctly. I created a simple example, and after clicking the button, I expect to retrieve the value of the property, but it returns null. I am unsure of what might be causing this issue. In my other tests, the setProperty method works fine, but when I try to getProperty, it always retrieves the same value that was set using setProperty. Additionally, I attempted to change the property in the browser itself, but the PropertyChangeListener never gets triggered after changing the value on the client side. I have spent a considerable amount of time troubleshooting this problem. Can anyone shed some light on what might be happening here?
HelloWorld.class
import com.vaadin.flow.component.DomEvent;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.littemplate.LitTemplate;
@Tag("hello-world")
@JsModule("./components/hello-world.ts")
public class HelloWorld extends LitTemplate {
@DomEvent("click")
public static class ClickEvent extends ComponentEvent<HelloWorld> {
public ClickEvent(HelloWorld source, boolean fromClient) {
super(source, fromClient);
}
}
public HelloWorld() {
setId("hello-world");
getElement().addPropertyChangeListener("value", "change", e -> {
System.out.println("change value: " + e.getValue());
});
addListener(ClickEvent.class, e -> System.out.println("getValue(): " + getValue()));
}
public void setValue(String value) {
getElement().setProperty("value", value);
}
public String getValue() {
return getElement().getProperty("value");
}
}
hello-world.ts
import { LitElement, html, property} from 'lit-element';
export class HelloWorld extends LitElement {
@property({type: String}) value = 'unset';
render() {
return html`
<div>${this.value}</div>
<button @click=${this._click}>Button</button>
`;
}
_click() {
this.value = 'Clicked';
let click = new Event('click');
this.dispatchEvent(click);
}
}
customElements.define("hello-world", HelloWorld);