I have a straightforward LitElement custom component that I would like to incorporate an "editing" state into. Although I already possess all the necessary information from the server, I am hesitant to introduce a new component solely for displaying an editing screen or refreshing the current component. However, I do wish to ensure that when a user hits the back button, they exit the editing state. Balancing these requirements has proven challenging for me.
Here's a simple example:
@customElement('my-element')
class MyElement extends LitElement {
@property({ attribute: false }) private _editing = false;
@property({ attribute: false }) private _data!: Data;
public connectedCallback() {
super.connectedCallback();
// Loading stuff..
}
public render() {
return this._editing
? html`
<editing-control .data=${this._data}></editing-control>
`
: html`
<details-control .data=${this._data}></details-control>
<button @click=${this._onEditClick}>Edit</button>
`;
}
private _onEditClick(e: Event) {
this._editing = true;
}
}
It's worth noting that I'm utilizing Vaadin router for routing, and I've encountered issues with the following approaches:
- When the edit button adds #editing to the URL (either as a link or by modifying the location using
Route.goorwindow.location.href), the router reconnects the component, leading to data reloads and state resets. - Any attempts to listen for 'popstate' notifications occur after vaadin-router actions, resulting in changes to the previous location before I can intervene.
- Utilizing onBeforeLeave doesn't allow me to distinguish between a back navigation attempt and a valid request to navigate to a different page from the menu.