What Would You Do Without a Framework? Front-End Anew with Lit-HTML

Declarative Reactive WEB component

template

Can i use : template

En 2008, J. Resig écrivait un post JavaScript Micro-Templating.

Pour résumer, on écrit un Template sous la forme

1. 1. <script type="text/html" id="user_tmpl">
   2.   <% for ( var i = 0; i < users.length; i++ ) { %>
   3.     <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
   4.   <% } %>
   5. </script>

Slot : en action

Exemple d'utilisation pour les WEB-Component de slot

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