Composants web

Un article de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher

La spécification des composants web (Web Components en anglais) est en cours de normalisation par le World Wide Web Consortium (W3C), l'organisme de normalisation du web.

Les composants web permettent aux développeurs de créer des balises HTML personnalisées et réutilisables.

"Les composants web permettent de combiner plusieurs éléments pour créer des composants d'interface graphique (widgets) réutilisables avec un niveau de richesse et d'interactivité sans commune mesure avec ce qui est aujourd'hui possible en se limitant aux CSS", explique le W3C.

Les composants web s'appuient sur plusieurs interfaces de programmation (API) du W3C :

  • templates : squelettes pour des éléments HTML instanciables
  • shadow DOM : ce qui sera public ou privé dans les éléments
  • custom elements : pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur
  • HTML imports : pour packager ses composants (CSS, JavaScript…)
  • model driven views : fournit un databinding semblable à celui d'AngularJS
  • Web animations : des APIs pour mettre en œuvre des animations complexes
  • pointer events : unifie les événements souris, tactile et stylet

Polyfills[modifier | modifier le code]

Plusieurs polyfills commencent à apparaître pour les composants web (un polyfill est une bibliothèque JavaScript destinée à émuler des fonctionnalités qui ne sont pas encore implémentées dans les navigateurs. Lorsqu'une fonctionnalité est absente, elle est émulée en JavaScript par le polyfill.)

  • webcomponents.js
  • Polymer de Google, présenté lors d'un salon Google I/O, et basé sur webcomponents.js
  • x-Tag, de la fondation Mozilla
  • Bosonic

Bibliothèques de composants[modifier | modifier le code]

Brick par Mozilla.

Hello World[modifier | modifier le code]

Voici un exemple d'application assez minimaliste (Hello World) utilisant un composant web (via le polyfill webcomponents.js) :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>

    <!-- Importing Web Component's Polyfill -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

    <!-- Importing Custom Elements -->
    <link rel="import" href="src/hello-world.html">
</head>
<body>

    <!-- Using Custom Elements -->
    <hello-world who="World"></hello-world>

</body>
</html>

Voir aussi[modifier | modifier le code]

Liens externes[modifier | modifier le code]