JSFiddle - React, Tailwind, and code Playground

HTML

<word-coun>teste</word-coun>

<popup-info img="img/alt.png" data-text="Your card validation code (CVC)
  is an extra security feature — it is the last 3 or 4 numbers on the
  back of your card."></popup-info>

JavaScript

class MyButton extends HTMLButtonElement {
  constructor() {
    super();
    console.log("construtor MyButton");
    this.addEventListener("click", (e) => this.rippe(e.offsetX, e.offsetY));
  }

  drawRipple(x, y) {
    let div = document.createElement("div");
    div.classList.add("ripple");
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight / 2} px`;
    div.style.left = `${x - div.clientWidth / 2} px`;
    div.style.backgroundColor = "currentColor";
    div.classList.add("run");
    div.addEventListener("transitioned", () => div.remove());
  }
}

class WordCount extends HTMLParagraphElement {
  constructor() {
    super();
    console.log("construtor WordCount");
  }
}

class PopUpInfo extends HTMLElement {
  constructor() {
    super();
    console.log("construtor PopUpInfo");
  }
}

// aqui, só o PopUpInfo (HTMLElement) loga o construtor
window.customElements.define("my-button", MyButton, { extends: "button" });
window.customElements.define('word-count', WordCount, { extends: 'p' });
window.customElements.define('popup-info', PopUpInfo);

console.log("---------------------");

// aqui, usando new, todos passam pelo construtor
let popup = new PopUpInfo();
document.body.appendChild(popup);

let paragr = new WordCount();
document.body.appendChild(paragr);

let button = new MyButton();
document.body.appendChild(button);