JSFiddle - React, Tailwind, and code Playground

JavaScript

class RandomParagraphSizePlaceholder extends HTMLElement 
{ 
  constructor() 
  { 
    console.log(`constructor hook`); 
    super();
  } 

  static get observedAttributes() 
  { 
    return ['text']; 
  } 
  
  set text(val) 
  { 
    if (val) 
    { 
      this.setAttribute(`text`, val); 
    } 
    else 
    { 
      this.setAttribute(`text`, ``); 
    } 
  } 

  get text() 
  { 
    return this.getAttribute('text'); 
  }
  
  connectedCallback() 
  { 
    console.log(`connectedCallback hook`);
    const placeholder = document.createElement('template');
    const myText = this.getAttribute('text') || 'Loren Ipsum';
    const randomSize = Math.floor((Math.random() * (50 - 12 + 1)) + 12);
    placeholder.innerHTML = RandomParagraphSizePlaceholder.template(myText, randomSize);
    this.appendChild(document.importNode(placeholder.content, true));
  } 

  disconnectedCallback() 
  { 
    console.log(`disconnectedCallback hook`); 
  } 

  attributeChangedCallback(attrName, oldVal, newVal) 
  { 
    console.log(`attributeChangedCallback hook`); 
    console.log(`attrName`, attrName); 
    console.log(`oldVal`, oldVal); 
    console.log(`newVal`, newVal); 
  } 

  static template (myText, randomSize) 
  { 
    return ` <div style="font-size:${randomSize}px">${myText}</div>`; 
  } 
} 

customElements.define('random-paragraph-size-placeholder', RandomParagraphSizePlaceholder); 

let bufferNode = document.createElement( 'random-paragraph-size-placeholder' );

bufferNode.setAttribute('text', 'Some text.');
document.body.appendChild( bufferNode );
document.body.appendChild( bufferNode );