Using custom elements

custom-element.js

class WordCound extends HTMLElement {
  constructor() {
    super();
    var shadowRoot = this.attachShadow({ mode: "open" });
    var p = document.createElement("p");
    p.textContent = "Hello World";

    p.setAttribute("class", "red-color");
    var style = document.createElement("style");

    style.textContent = `
          .red-color {
            color: red;
          }
    `;

    shadowRoot.appendChild(style);
    shadowRoot.appendChild(p);
  }
}

window.customElements.define("text-info", WordCound);