Web component : sa propre balise

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

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


  })

? h1

Etudier le code HTML suivant


Nous pouvons constater que la numérotation des chapitres à été faite à la main : CE QU'IL FAUT EVIDEMMENT EVITER.

Le code CSS permet de résoudre ce problème
body {
    counter-reset: h1 ;
}

h1:after {
    content: "." counter(h1);
    counter-increment: h1 ;
}

lire article

Tout semble parfait maintenant.

Cependant la lecture de l'article suivant pose un autre problème : celui de la structure du document.

Dans cet article, il est important de comprendre : the sections determines the outline, not the heading rank of the sections. 

On retiendra

Il est intéressant de comprendre l’intérêt de l'utilisation des sections (ou article) dans la strucutre du document. Comparez les deux exemples.

Subscribe to the Google Developers channel

Subscribe to the Google Developers channel here: http://goo.gl/mQyv5L

GOOGLE

 Notez que :

document.registerElement() is deprecated in favor of customElements.define().