class TitleComponent extend HTMLElement {
  constructor() {
    super()
    this.innerHTML = '<h1>This is a component</h1>'
  }
}

customElement.define('x-title', TitleComponent)

<x-title></x-title>

<!-- x-title.html -->
<template>
  <h1>This is a component</h1>
</template>

<x-title></x-title>

<template>
  <h1>List of attendees</h1>
  <ul :if="this.attendees.length">
    <li :for="attendee in this.attendees">${ this.attendee.name }</li>
  </ul>
  <p :if="!this.attendees.length">No attendee yet</p>
  
  <button on:click="this.addAttendee">Join!</button>
</template>

<template>
  <button on:click="this.clicked" :clicked="${ this.state.status === 'clicked' }"><slot></slot> (${ this.state.status })</button>
</template>

<script>
  this.state.status = 'unclicked'

  this.clicked = () => {
    this.state.status = this.state.status === 'unclicked' ? 'clicked' : 'unclicked'
    this.render()
  }
</script>

<style>
  button {
    padding: 1rem 2rem;
    border-radius: .5rem;
    cursor: pointer;
  }
</style>