Web Components initialement définis par 4 fonctionnalités : Custom Elements, Shadow DOM, HTML templates et HTML imports.

HTML imports

Pas de consensus, pas d'implémentation prévu dans Firefox, sera supprimé de Chrome en 2019.

HTML templates

Disponible dans les navigateurs mais peu utile sans HTML imports

Polymer 3 abandonne HTML imports et HTML templates (remplacés par des "template literals" en Javascript)

Shadow DOM

Permet d'avoir un arbre DOM isolé du reste : Remarques :

Custom Elements

Permet de définir des nouveaux tags HTML.

Exemple

Sans Custom Elements : 
<hello-world>...</hello-world>

<script>
function hello_world_render(elt) {
     elt.innerHTML = "<b>Bonjour</b>"
}
for (const elt of document.querySelectorAll('foo-bar')) {
   foo_bar_render(elt);
}
</script>
Avec Custom Elements : 
<hello-world>...</hello-world>

<script>
customElements.define('hello-world', class extends HTMLElement {
  connectedCallback() {
     this.innerHTML = "<b>Bonjour</b>"
  }
});
</script>

Avantages

Inconvénients

Frameworks permettant de créer des Custom Elements

Divers

Modules ES6

Les modules ES6 sont une grande avancée pour le Javascript côté navigateur : ils permettent d'éviter de charger les librairies dans un espace de nommage global.

Jusqu'ici des outils comme webpack étaient nécessaire pour gérer ces modules.
Ce n'est plus le cas (sauf MSIE), néanmoins webpack semble toujours nécessaire pour :

Conseils

Liens divers