JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    Hello
    <text-span text=""></text-span>
  </body>

</html>

JavaScript

'use strict';

class TextSpan extends HTMLElement {
  static get observedAttributes() {
    return ['text'];
  }

  constructor() {
    // establish prototype chain
    super();

    this.setupEventListeners();
    this.render(this);
  }

  setupEventListeners() {
    this.addEventListener("text-changed", (event) => {
      this.render(this);
    });
  }

  async connectedCallback() {
    setInterval(() => {
      this.text = Date.now();
      this.dispatchEvent(new CustomEvent('text-changed'));
    }, 0);
    this.render(this);
  }

  get text() {
    return this.getAttribute('text') || '';
  }

  set text(value) {
    return this.setAttribute('text', value);
  }

  render(el) {
    const titleElem = document.createElement('h3');
    titleElem.innerText = el.text;

    el.innerHTML = ``;
    el.appendChild(titleElem);
  }
}

// let the browser know about the custom element
customElements.define('text-span', TextSpan);