Single file MyMessage Custom Element pure function that enables adding tags dynamically in the browser with JavaScript

my-message.mjs

export default function MyMessage({ html, state }) {
  const { attrs } = state
  const { message='' } = attrs
  return html`
<h1>${ message }</h1>

<script type="module">
class MyMessage extends HTMLElement {
  constructor() {
    super()
    const templateID = `${this.tagName.toLowerCase()}-template`
    const template = document.getElementById(templateID)
    if (template) {
      this.template = template
    }
    else {
      this.template = document.createElement('template')
      this.template.innerHTML = `<h1></h1>`
      this.template.setAttribute('id', templateID)
    }
    this.replaceChildren(this.template.content.cloneNode(true))

    this.heading = this.querySelector('h1')
  }

  static get observedAttributes() {
    return [ 'message' ]
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      if (name === 'message') {
        this.heading.textContent = newValue
      }
    }
  }
}
customElements.define('my-message', MyMessage)
</script>
`
}