LitElement web component which converts HTML markup to an uppercase and reversed string

upcasereverse.js

import { LitElement, html } from "lit-element"

class UpcaseReverse extends LitElement {
  connectedCallback() {
    super.connectedCallback()

    const observer = new MutationObserver(this.requestUpdate.bind(this));
    observer.observe(this, { characterData: true, subtree: true })
  }

  render() {
    const munged = this.textContent.toUpperCase().split("").reverse().join("")
    return html`<div>${munged}</div>`
  }
}
customElements.define('upcase-reverse', UpcaseReverse)

See it in action! https://components.studio/edit/JssGVLyIYkNPggDH8N59