leverage <template> element for footer and header custom element examples

[srpcoder]

Changes were made in the DOM

resolves #84

[thescientist13]

Thanks for this @srpcoder and apologies for the delay in reviewing this.

Let me take a look at the build failure because it seems like this should work but the Netlify build does not seem to be happy for some reason. 🤔

[thescientist13]

Yeah, this is breaking the build for me locally too and I think is just a mismatch between Light DOM / DSD.

But as a quick test, this would work

export default class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template.innerHTML;
  }
}

Getting closer to DSD conventions this works...

export default class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.appendChild(template.content.cloneNode(true));
  }
}

However, this will render everything out into a DSD (e.g. <template shadowrootmode="open">...</template> (naturally) which is not really what we want here since we are explicitly looking to render out only to Light DOM for these components.

---

So yeah, I think this is the form we want to go with here

export default class HeaderComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = template.innerHTML;
  }
}

edit: Not sure that will actually work, let me keep looking into this, will try and get a conclusive answer for you.