web-app/index.js

import { LitElement, html } from 'https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js'

class WebApp extends LitElement {
  static properties = {
    started: { type: Boolean }
  }

  constructor () {
    super()
    this.started = false
  }

  _clickHandler () {
    this.started = !this.started
  }

  _buttonHandler (label) {
    return html`<button type="button" @click=${this._clickHandler}>${label}</button>`
  }

  render () {
    if (this.started) {
      return html`
             <session-started></session-started>
             ${this._buttonHandler('Terminar sesión')}
           `
    }
    return html`
           <session-closed></session-closed>
           ${this._buttonHandler('Iniciar sesión')}
         `
  }
}
customElements.define('web-app', WebApp)

class SessionClosed extends LitElement {
  static properties = {
    user: { type: String },
    pass: { type: String }
  }

  constructor () {
    super()
    this.user = ''
    this.pass = ''
  }

  render () {
    return html`
           <h2>Inicio de sesión</h2>

           <input placeholder="usuario" type="text" value="">

           <input placeholder="contraseña" type="password" value="">`
  }
}
customElements.define('session-closed', SessionClosed)

class SessionStarted extends LitElement {
  static properties = {
    message: { type: String }
  }

  constructor () {
    super()
    this.message = 'Bienvenido a tu sesión'
  }

  render () {
    return html`<h2>${this.message}</h2>`
  }
}
customElements.define('session-started', SessionStarted)