I am trying to implement a nav component as seen on Ionics website. https://ionicframework.com/docs/api/nav

The scenario I want to achive is when a used clicks on the 'click to update' button after clikcing on the item it should call the funtion updateList(). But everytime it is click the error message comes up with: CustomElementRegistry.define: 'nav-home' has already been defined as a custom element"

The whole point is when this function is call then a ajax call will be made (currently commented) and new data will be return to then re-populate the nav component.

My question is how can I avoid this issue I am getting and just update the nav items easily.

Thanks

I have added a JSFiddle link below to replicate the issue

https://jsfiddle.net/pilotman/fq8bh347/1/

    function updateList() {
    
    //Ajax will go here instead of above structure and update techs here instead
    
      customElements.define('nav-home', class NavHome extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Nav</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen>
            <ion-list>
            ${techs.map(tech => `
                <ion-item button onclick="showDetail('${tech.title}')">
                  <ion-icon slot="start" name="logo-${tech.icon}" style="color: ${tech.color};"></ion-icon>
                  <ion-label>
                    <h3>${tech.title}</h3>
                  </ion-label>
                </ion-item>
            `).join('\n')}
            </ion-list>
          </ion-content>
        `;
        }
      });
    }