escape

code

/tabs.html

https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html

VS extension : open-in-browser.

Pour installer dans VisualStudio l'extension open-in-browser à partir de la ligne de commande, utilisez le format suivant.

code --install-extension techer.open-in-browser

Rendez vous dans l'éditeur

key	command
Alt + B	open in default browser
Shift + Alt + B	open in specified browser

Directement dans le fichier .html, bouton de droite

Les éditeurs en ligne

Voici une liste d'éditeurs en ligne !

• JSFiddle
• StackBlitz
• Repl.it
• CodePen

Pour ma part, j'ai longtemps utilisé jsbin

J'ai également intégré codeMirror pour proposer un éditeur en ligne myEditor.

Microsoft

lien

Intégration d'une vidéo

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


  })