How to use the haunted.component function in haunted

<h3>Log in or register an account!</h3>
                    
                    

                     update({customerid: '45645645'})}&gt;Log in
                    Register
                            
                `
            :html`<h2>(You are already logged in, go to the <a href="/pizzamenu">pizza menu</a> and order some pizzas :)</h2>`

        }
        
    `;
}
customElements.define('x-login', component(LoginFE, { useShadowDOM: false }));

const createConsumer = Context =>
  component(
    function({ render }) {
      const context = useContext(Context);

      return render(context);
    },
    HTMLElement,
    { useShadowDOM: false }
  );

`;
};

export default GlobalState;

customElements.define("global-state", component(GlobalState));

Products
          
          <li>
            Cart (${cartItemNumber})
          </li>
        
      
    
  `;
};

export default MainNavigation;

customElements.define(
  "main-navigation",
  component(MainNavigation, HTMLElement, { useShadowDOM: false })
);

.on(route.path, params => {
          if (!customElements.get(route.tag)) {
            customElements.define(
              route.tag,
              component(route.page, HTMLElement, { useShadowDOM: false })
            );
          }
          Router.inject(route.tag);
        })
        .resolve();

${logo}
    <h1>${title}</h1>
    <p>Edit <code>src/MyApp.js</code> and save to reload.</p>
    <a rel="noopener noreferrer" href="https://open-wc.org/developing/#examples" class="app-link">
      Code examples
    </a>
  `;
}

export const PageMain = component(PageMainElement);

color: var(--color-active, black);
      }
    
    <a class="${active ?" href="${element.to}">
      
    </a>
  `;
};

RouterLink.observedAttributes = ["to"];

customElements.define("router-link", component(RouterLink));