web-header.js

import { LitElement, html } from 'lit';

export class Component extends LitElement {
  static properties = {
    isLoggedIn: {
      type: Boolean
    }
  }

  constructor () {
    super();
    this._boundSetLoggedIn = this.setLoggedIn.bind(this) // this === Component
  }

  setLoggedIn (value) {
    // "this" is equal to Component Class because we have bounded it
    this.isLoggedIn = !!value;
  }

  createRenderRoot () {
    return this;
  }

  render () {
    return html`
      <header class="header">
        <h1>
          <a href="/">My Blog</a>
        </h1>

        <nav>
          ${this.isLoggedIn
            ? html`<a href="/logout">Logout</a>`
            : html`<a href="/login">Login</a>`}
        </nav>
      </header>
    `
  }
}

window.customElements.define('web-header', Component);