brandonros/lit-element-spa.html

## lit-element-spa.html
<!doctype html>
<html>
  <head>
    <script type="module">
      import { LitElement, css, html } from 'https://unpkg.com/lit-element@latest/lit-element.js?module'

      class RouterLink extends LitElement {
        static get properties() {
          return {
            href: { type: String }
          }
        }

        constructor() {
          super()
          this.addEventListener('click', this.onClick)
        }

        onClick (event) {
          event.preventDefault()
          const changeRouteEvent = new CustomEvent('change-route', { detail: this.href })
          document.querySelector('app-container').dispatchEvent(changeRouteEvent)
        }

        render() {
          return html`<a href="${this.href}"><slot></slot></a>`
        }
      }

      class AppContainer extends LitElement {
        static get properties() {
          return {
            activeRoute: { type: String }
          }
        }

        changeRoute(event) {
          this.activeRoute = event.detail
          window.history.pushState({}, event.detail, event.detail)
        }

        popstate(event) {
          this.activeRoute = event.detail
        }

        constructor() {
          super()
          this.activeRoute = '/'
          this.addEventListener('change-route', this.changeRoute)
          this.addEventListener('popstate', this.popstate)
        }

        render() {
          let template = [html`<slot></slot>`]
          if (this.activeRoute === '/') {
            template.push(html`<home-route></home-route>`)
          } else if (this.activeRoute === '/info') {
            template.push(html`<info-route></info-route>`)
          }
          return html`${template}`
        }
      }

      class HomeRoute extends LitElement {
        constructor() {
          super()
        }

        render() {
          return html`<div>Home</div>`
        }
      }

      class InfoRoute extends LitElement {
        constructor() {
          super()
        }

        render() {
          return html`<div>Info</div>`
        }
      }

      window.customElements.define('router-link', RouterLink)
      window.customElements.define('app-container', AppContainer)
      window.customElements.define('home-route', HomeRoute)
      window.customElements.define('info-route', InfoRoute)
    </script>
    <title>LitElement Example</title>
  </head>

  <body>
    <app-container>
      <router-link href="/">Home</router-link>
      <router-link href="/info">Info</router-link>
    </app-container>

    <script type="text/javascript">
      window.addEventListener('popstate', (event) => {
        const popstateEvent = new CustomEvent('popstate', { detail: event.target.location.pathname })
        document.querySelector('app-container').dispatchEvent(popstateEvent)
      })
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<script type="module">
	import { LitElement, css, html } from 'https://unpkg.com/lit-element@latest/lit-element.js?module'

	class RouterLink extends LitElement {
	static get properties() {
	return {
	href: { type: String }
	}
	}

	constructor() {
	super()
	this.addEventListener('click', this.onClick)
	}

	onClick (event) {
	event.preventDefault()
	const changeRouteEvent = new CustomEvent('change-route', { detail: this.href })
	document.querySelector('app-container').dispatchEvent(changeRouteEvent)
	}

	render() {
	return html`<a href="${this.href}"><slot></slot></a>`
	}
	}

	class AppContainer extends LitElement {
	static get properties() {
	return {
	activeRoute: { type: String }
	}
	}

	changeRoute(event) {
	this.activeRoute = event.detail
	window.history.pushState({}, event.detail, event.detail)
	}

	popstate(event) {
	this.activeRoute = event.detail
	}

	constructor() {
	super()
	this.activeRoute = '/'
	this.addEventListener('change-route', this.changeRoute)
	this.addEventListener('popstate', this.popstate)
	}

	render() {
	let template = [html`<slot></slot>`]
	if (this.activeRoute === '/') {
	template.push(html`<home-route></home-route>`)
	} else if (this.activeRoute === '/info') {
	template.push(html`<info-route></info-route>`)
	}
	return html`${template}`
	}
	}

	class HomeRoute extends LitElement {
	constructor() {
	super()
	}

	render() {
	return html`<div>Home</div>`
	}
	}

	class InfoRoute extends LitElement {
	constructor() {
	super()
	}

	render() {
	return html`<div>Info</div>`
	}
	}

	window.customElements.define('router-link', RouterLink)
	window.customElements.define('app-container', AppContainer)
	window.customElements.define('home-route', HomeRoute)
	window.customElements.define('info-route', InfoRoute)
	</script>
	<title>LitElement Example</title>
	</head>

	<body>
	<app-container>
	<router-link href="/">Home</router-link>
	<router-link href="/info">Info</router-link>
	</app-container>

	<script type="text/javascript">
	window.addEventListener('popstate', (event) => {
	const popstateEvent = new CustomEvent('popstate', { detail: event.target.location.pathname })
	document.querySelector('app-container').dispatchEvent(popstateEvent)
	})
	</script>
	</body>
	</html>