Edit in JSFiddle

customElements.define('my-paragraph',
  class extends HTMLElement {
    constructor() {
      super();

      this.template = `
      <style>
  				p:after {
  				content: " " attr(data-words);
  				color: red;
					}
 			 </style>
  		 <p contenteditable data-words=""></p>`;


      //recopie le texte
      this.init();

      setInterval(_ => {
        const count = this.countWords(this.shadowRoot);
        this.shadowRoot.querySelector("p").dataset.words = count;
      }, 2000);
    }

    countWords(node) {
      const text = node.querySelector("p").textContent;
      return text.trim().split(/\s+/g).length;
    }

    init() {
        const shadowRoot = this.attachShadow({
          mode: 'open'
        })
        .innerHTML = this.template;
        this.shadowRoot.querySelector("p").innerHTML = this.innerHTML;
    }


  })

<my-paragraph>
  ajouter ou supprimer des mots
</my-paragraph>