export default class HeaderComponent extends HTMLElement {
  // run some code to set HTML when the component is ready
  connectedCallback() {
    this.innerHTML = this.getTemplate();
  }

  // create templates that interpolate variables and HTML!
  getTemplate() {
    return `
      <!-- a bunch of HTML -->
    `;
  }
}

customElements.define('app-header', HeaderComponent);

const template = document.createElement('template');

template.innerHTML = `
  <!-- a bunch of HTML -->
`;

export default class HeaderComponent extends HTMLElement {
  // run some code to set HTML when the component is ready
  connectedCallback() {
    this.innerHTML = template.content.cloneNode(true); // or something similar
  }
}

customElements.define('app-header', HeaderComponent);