JSFiddle - React, Tailwind, and code Playground

by snifty

HTML

<!doctype html>
<title>Add a heading</title>
<button id="add-html">click me to add insert some HTML</button>
<button id="add-element">click me to instantiate an element</button>

JavaScript

class FancyHeader extends HTMLElement {
  constructor(){
    super()
    this.innerHTML = `<h1>I’m a fancy header!</h1>`
  }
}

customElements.define('fancy-header', FancyHeader)

document.querySelector('button#add-html').onclick = () => {
  let fancyHeaderHTMLString = `<fancy-header></fancy-header>`
  document.body.insertAdjacentHTML("beforeend", fancyHeaderHTMLString)
}

document.querySelector('button#add-element').onclick = () => {
  let fancyHeaderElement = new FancyHeader()
  document.body.append(fancyHeaderElement)
}