Web Components (composants web)

1.      Web Components (composants web) 1

2.      Exemple  d’un composant html 5. 1

3.      Exemple d’un composant personnalisé. 1

4.      Web Component specifications. 1

5.      Shadow DOM is a way to create a component-local DOM. 2

6.      Création d’un élément personnalisé. 2

7.      Exemple :Bouton incremented. 3

 

1.    Web Components (composants web)

Les composants web (Web Components) sont un ensemble de plusieurs technologies qui permettent de créer des éléments (balises)

 

 personnalisés réutilisables, dont les fonctionnalités sont encapsulées en dehors du reste du code et qui peuvent être utilisées au sein d'applications web.(Mozilla)

Definition 2 : “Reusable extendable encapsulated self-contained components for the web”

2.    Exemple  d’un composant html 5

Considérez la balise HTML <video> . Avec une URL, un utilisateur  peut utiliser les  contrôles comme la lecture, la pause, le retour en arrière, l’avance et le réglage du volume.

 

3.    Exemple d’un composant personnalisé.

un élément indiquant le nombre de mots sur la page ? Il n’y a pas (encore) de balise HTML <wordcount>.

Un composant pour incrémenter et décrémenter un compteur. Il n’y a pas (encore) de balise HTML <boutton-incdec>.

 

4.    Web Component specifications

Comme toute technologie, les composants Web ont également un ensemble de spécifications (outils) qui doivent être suivies afin d'obtenir les fonctionnalités qui leur sont associées.

Cette spécification repose sur les 3 concepts suivants:

  • Custom element (élément personalisé): la capacité de créer des balises personnalisées  compréhensibles par les navigateurs.
  • Shadow DOM:une approche pour créer un DOM local d’un composant. Le contenu de ce composant est encapsulé  (isolé)  du reste du  DOM. (créer un DOM dans un DOM).

  • Le DOM fantôme (Shadow DOM) sert à l’encapsulation. Il permet à un composant d’avoir son propre arbre DOM “fantôme”, qui ne peut pas être accidentellement accédé à partir du document principal, peut avoir des règles de style locales, et plus encore.

    Encapsulation

    Le DOM fantôme est fortement délimité du document principal :

    1. Les éléments du DOM fantôme ne sont pas visibles par querySelector depuis le DOM standard. En particulier, les éléments du DOM fantôme peuvent avoir des identifiants qui entrent en conflit avec ceux du DOM standard. Ils doivent être uniques seulement dans l’arbre d’ombre.
    2. Le DOM fantôme a ses propres feuilles de style. Les règles de style du DOM externe ne sont pas appliquées.

  • Template:  outil pour créer une structure DOM réutilisable et modifiable par code et produit le résultat voulu.

Ces trois outils sont généralement utilisés pour créer des balises personalisées et reutilsables.

Now that we know these specifications and what they do, let's dive into them individually and try to look at their JavaScript APIs.

5.    Shadow DOM is a way to create a component-local DOM.

  1. shadowRoot = elem.attachShadow({mode: open|closed}) – creates shadow DOM for elem. If mode="open", then it’s accessible as elem.shadowRoot property.
  2. We can populate shadowRoot using innerHTML or other DOM methods.

 

6.    Création d’un élément personnalisé

1.      Définition de l’élément

Pour créer un élément personnalisé <mot-mot> (<my-element>), on doit d’abord  donner ces détails au navigateurs : comment l’afficher, les actions à faire quand il est insérer ou supprimer de la page…etc.

Ceci est fait en créant une classe ayant le nom motmot (myelement) contenant des méthodes spéciales(optionnelles).

ci-dessous le modèle de cette classe :

 

class MyElement extends HTMLElement {

  constructor() {

    super();

    // element created

  }

 

  connectedCallback() {

    // browser calls this method when the element is added to the document

    // (can be called many times if an element is repeatedly added/removed)

  }

 

  disconnectedCallback() {

    // browser calls this method when the element is removed from the document

    // (can be called many times if an element is repeatedly added/removed)

  }

 

  static get observedAttributes() {

    return [/* array of attribute names to monitor for changes */];

  }

 

  attributeChangedCallback(name, oldValue, newValue) {

    // called when one of attributes listed above is modified

  }

 

  adoptedCallback() {

    // called when the element is moved to a new document

    // (happens in document.adoptNode, very rarely used)

  }

 

  // there can be other element methods and properties

}

 

2.      Enregistrement de l’élément

Informer le naviagteur que la classse myelement  represente l’element   <my-element>

// let the browser know that <my-element> is served by our new class

customElements.define("my-element", MyElement);

maintenant pour chaque balise <my-element> une instance de la classse myelement est céee et ces méthodes sont invoquées. On peut aussi faire document.createElement('my-element') in JavaScript.

7.    Exemple :Bouton incremented

<script>

var template = document.createElement('template');

template.innerHTML = '<div id=d1><button id="dec">+</button> <span id="count">0</span></div>';

 

class bouttonincrementer extends HTMLElement {

  constructor() {

                        super();

this.attachShadow({mode: 'open'});}

 

connectedCallback()  {

 

this.shadowRoot.appendChild(template.content.cloneNode(true));

const button = this.shadowRoot.getElementById("dec");

let r=this.shadowRoot;

    button.addEventListener("click", test);

 

 function test() {

let cptt=r.getElementById("count").innerHTML;

    let num=parseInt(cptt);

    num=num+1;

 r.getElementById("count").innerHTML=num;

 } }

}

window.customElements.define(' boutton-incrementer ', bouttonincrementer);

</script>

 

<div> Quantité</div>< boutton-incrementer ></ boutton-incrementer >

<div> Quantité</div>< boutton-incrementer ></ boutton-incrementer >

//r  doit être déclarer au niveau de connectedcallback pour éviter le  pb de this

 

 

 [MM1]


آخر تعديل: الأربعاء، 4 مايو 2022، 11:22 PM