Un bon développeur est un développeur flemmard !

Bonjour,

L'un de mes collègues à réalisé un super article parlant des WebComponent des principes fondateurs qui se trouvent derrière.

Envoyé par Article du collègue

Les WebComponents reposent sur 4 “piliers” pour exister : Template, Shadow-DOM, Import et Custom Element.

Shadow DOM
J'avoue que juste pour le nom, j'aime le principe !

Envoyé par Dimitri Glazkov

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.

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.

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 :

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>

Résultat :

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