Voici un exemple :
HTML
<my-paragraph> ajouter ou supprimer des mots </my-paragraph>js
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;
}
})
lecture