elements.ts

customElements.define('app-shell', class extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <h1>App</h1>
      <slot></slot>
    `
  }
});

customElements.define('home-page', class extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <h1>Home</h1>
      <slot></slot>
    `
  }
});



customElements.define('about-page', class extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <h1>About</h1>
      <slot></slot>
    `
  }
});

index.html

<app-shell></app-shell>

states.ts

{ 
  name: 'home',
  component: 'home-page',
  url: 'home'
}
{
  name: 'about',
  component: 'about-page',
  url: 'home'
}