Ma découverte de WebComponent et Shadow DOM !
par
, 23/02/2015 à 17h15 (1411 Affichages)
Bonjour,
L'un de mes collègues à réalisé un super article parlant des WebComponent des principes fondateurs qui se trouvent derrière.
Shadow DOMEnvoyé par Article du collègue
J'avoue que juste pour le nom, j'aime le principe !
En plus clair, c'est le (sous) DOM que le navigateur va générer comme une seul élément (input/video) dans le DOM de la page.Envoyé par Dimitri Glazkov
D'après ce que j'ai vue FireBug n'a pas encore l'option pour visualiser le Shadow DOM :
C'est dans la wish liste : https://getfirebug.com/wiki/index.ph...List#DOM_Panel
Mais, il est présent dans les tools de Chrome, option : user agent shadow DOM (Désactivé par défaut.)
WebComponents
Je n'ai fait qu'un tour rapide sur un exemple "ultra simple" (côté utilisation) avec Time-Elements qui permet d'afficher des dates proprement simplement à partir d'une balise :
Résultat :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.4/webcomponents.js"></script> <script src="time-elements.js"></script> <time is="relative-time" datetime="1970-01-01T00:00:00.000Z">Oops! This browser doesn't support Web Components.</time>
Code html : Sélectionner tout - Visualiser dans une fenêtre à part <time is="relative-time" datetime="1970-01-01T00:00:00.000Z" title="Jan 1, 1970, 1:00 AM GMT+1">on Jan 1, 1970</time>
J'ai testé le changement à la volé de l'attribut datetime, cela déclenche le recalcule du champs. Même si le composant en lui-même n'est pas parfait, le potentiel est bien là. Simple à utiliser et propre.
Note : Testé sur Chrome : Ok FireFox : KO (En Th. c'est possible avec un JavaScript ou la dernière version Work In Progress !)
IE : Inconnu.
Les standards ne sont pas encore fixé comment d'habitude, mais l'idée et les POC à valeur ajouté sont là. CEla va probablement facilité la vie de beaucoup de personnes dans l'intégration fonctionnalité HTML/JavaScript via l'utilisation de framework balise. Où la balise et le contrat à remplir. (Interface, modèle objet ...)
Si vous avez des tutoriels ou des liens de présentation sur le sujet hésitez pas !
Cordialement,
Patrick Kolodziejczyk.
source :
http://glazkov.com/2011/01/14/what-t...is-shadow-dom/
http://customelements.io/
https://github.com/github/time-elements