Premiers pas avec le composant Web

Disponibilité

Implémentations natives

L’élément <template> est implémenté dans tous les navigateurs modernes :

  • Chrome,
  • Bord, -Firefox,
  • Opéra, -Safari,
  • […][1]

Les éléments personnalisés customElements.define(), Shadow DOM attachShadow() et les importations HTML <link rel="import"> sont implémentés dans les dernières versions de Chrome et Opera.

Polyfills

Pour les autres navigateurs, vous pouvez utiliser une bibliothèque polyfill :

  • pour les Custom Elements : depuis [WebReflection][2] ou [Webcomponents.org][3],
  • pour Shadow DOM : depuis [Webcomponents.org][5],
  • pour Template : de [Neovov][4],
  • pour les importations HTML : depuis [Webcomponents.org][6]

[1] : http://caniuse.com/#search=web%20components [2] : https://github.com/WebReflection/document-register-element [3] : https://github.com/webcomponents/custom-elements [4] : https://github.com/neovov/template-element-polyfill [5] : https://github.com/webcomponents/shadydom [6] : https://github.com/webcomponents/html-imports

Modèle HTML - Bonjour le monde

Utilisez un élément <template> pour concevoir un modèle HTML que vous pouvez ensuite réutiliser dans votre code.

<template id="Template1">
    Hello, World !
<template>

<div id="Target1"></div>

<script>
   Target1.appendChild( Template1.content.cloneNode( true ) )
</script>

Cela insérera le contenu du modèle dans la div #Target1.

Élément personnalisé - Bonjour le monde

Créez une nouvelle balise HTML nommée <hello-world> qui affichera “Hello, World !” :

<script>
//define a class extending HTMLElement
class HelloWorld extends HTMLElement {
    connectedCallback () {
      this.innerHTML = 'Hello, World!'
    }
}

//register the new custom element
customElements.define( 'hello-world', HelloWorld )
</script>

<!-- make use the custom element -->
<hello-world></hello-world>

Shadow DOM - Bonjour le monde

Ajoutez un Shadow DOM à un div qui affichera “Hello, World!” au lieu de son contenu initial.

<div id="Div1">intial content</div>

<script>
   var shadow = Div1.attachShadow( { mode: 'open' } )
   shadow.innerHTML = "Hello, World!" 
</script>

Importation HTML - Bonjour tout le monde

Importez un fichier HTML qui ajoutera un div avec “Hello, World!” à la fin de l’arborescence DOM du document principal.

Fichier importé hello.html :

<script>
   var div = document.createElement( 'div' )
   div.innerHTML = 'Hello, World!'
   document.body.appendChild( div )
</script>

Fichier principal index.html :

<html>
  <link rel="import" href="hello.html">

Exemple de Hello World

Cet exemple combine un élément personnalisé, un modèle, un DOM fantôme et une importation HTML pour afficher le message “Hello, World!” chaîne en HTML.

Dans le fichier hello-world.html :

<!-- 1. Define the template -->
<template>
   Hello, World!
</template>

<script>
  var template = document.currentScript.ownerDocument.querySelector( 'template' )   

  //2. Define the custom element
  
  customElements.define( 'hello-world', class extends HTMLElement 
  {
      constructor() 
      {
          //3. Create a Shadow DOM
          var sh = this.attachShadow( { mode: 'open' } )
          sh.appendChild( document.importNode( template.content, true ) )
     }
  } )
</script>

Dans le fichier principal index.html :

<html>
<head>
    <!-- 4. Import the HTML component --> 
    <link rel="import" href="hello-world.html">
</head>
<body>
    <hello-world></hello-world>      
</body>
</html>