A barebones example of creating and rendering a web component.
Within the component itself, it is essentially a 3 step process:
- Define a template
- Clone the DocumentFragment within the template and update the HTML within it however we see fit
- Target the components placeholder on the DOM and insert the newly cloned DocumentFragment
Alongside that, we must do the following:
- Insert the component's tag in the HTML
- Register the component using
customElements.define(tagName, className)