I am facing an issue with my class that includes three buttons for navigating the app. The event listeners I add to these buttons in the connectedCallback method only work once. When I click one of the buttons, like the next button, it changes the attribute of another element as expected. However, when I try to click and navigate to a new screen, it stops working. Even in the inspector, the events are still attached to the buttons but they do not respond.
Is there something I am missing? I suspect it could be related to the shadow DOM, but I haven't been able to figure it out.
Thank you in advance!
export class NavigationButtons extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.render();
if (this.shadowRoot) {
const styleSheet = document.createElement("style");
styleSheet.textContent = styles;
this.shadowRoot.append(
navigationButtons.content.cloneNode(true),
styleSheet
);
}
}
connectedCallback() {
const onrampModal = document.querySelector('pera-onramp-modal');
if (this.shadowRoot) {
this.render();
const step = onrampModal?.getAttribute('step');
this.shadowRoot.getElementById("back-button")?.addEventListener("click", () => {
onrampModal?.setAttribute("step", (Number(step) - 1).toString());
}
)
this.shadowRoot.getElementById("next-button")?.addEventListener("click", () => {
onrampModal?.setAttribute("step", (Number(step) + 1).toString());
}
)
this.shadowRoot.getElementById("cancel-button")?.addEventListener("click", () =>
{
onrampModal?.setAttribute("step", "0");
}
)
}
}
private render() {
navigationButtons.innerHTML = `
<div id="navigation-buttons">
<button id="back-button" class="navigation-buttons__button-back" >Back</button>
<button id="next-button" class="navigation-buttons__button--next">next</button>
<button id="cancel-button" class="navigation-buttons__button--cancel">cancel</button>
</div>
`;
}
}