customElements

Est-il possible de définir nos propres balises ?

Voici un exemple :

HTML

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

JS

Il existe deux types de composants.les éléments autonomes personnalisés ou intégrés.

Exemple d'un élément autonome personnalisé.

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>;

      this.init();

//compte les mots du texte tous les 2 secondes et met à jour l'attribut data-words
      setInterval( _ => {
        const count = this.countWords(this.shadowRoot);
        this.shadowRoot.querySelector("p").dataset.words = count;
      }, 2000);
    }

//méthodes
    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;
    }


  })

CSS

La mise à jour du nombre de mots dans un paragraphe et affiché par le CSS

p:after {
  content: " " attr(data-words);

...}

Code en action

 
lecture