Composants web
Cet article doit être actualisé (dernière mise à jour : 2015) (octobre 2025).
Cet article doit être actualisé (dernière mise à jour : 2015) ().
Motif : Les composants web ne sont peut-être plus "en cours de normalisation" ni "sans commune mesure avec ce qui est aujourd'hui possible en se limitant au CSS".
Cet article est une ébauche concernant l’informatique.
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
Les composants web sont gérés par la majorité des navigateurs web. Cependant, afin de garantir la compatibilité avec les vieux navigateurs, il existe plusieurs polyfills :
- 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
Hello World
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
- Composant d'interface graphique
- Web sémantique
- Programmation orientée composant
- HTML5
- Standards du Web
Liens externes
- Introduction aux composants web, par le W3C
- Utilisez les Web Components dès aujourd'hui avec Polymer de Google
- webcomponents.js
- Polymer, polyfill de Google
- x-Tag, polyfill de la fondation Mozilla
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.