davidbgk
/
larlet-fr-david

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Un Web orienté composants — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/blog/2013/web-oriente-composants/">
  <!-- SEO/Semantic metadata -->
  <meta name="description" content="Les Web Components ont certainement leur carte à jouer dans l’avenir du Web et de ses interactions." />
  <meta name="twitter:description" property="og:description" itemprop="description" content="Les Web Components ont certainement leur carte à jouer dans l’avenir du Web et de ses interactions." />
  <meta name="twitter:title" property="og:title" itemprop="name" content="Un Web orienté composants" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:creator" content="@davidbgk" />
  <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2013/web-oriente-composants/" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/david-larlet-avatar-thumbnail.jpg" />


<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1 class="single">
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Un Web orienté composants
  <time>Publié le 8 octobre 2013</time>
</h1>
<article class="single">
  <p><em>Article initialement publié pour <a href="http://letrainde13h37.fr/">le magazine le train de 13h37</a> avec pour titre <a href="http://letrainde13h37.fr/45/web-oriente-composants/">Un Web orienté composants</a> sous <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/fr/legalcode">licence CC BY-NC-SA</a> et <a href="/david/blog/2014/rapatriement-articles/">rapatrié depuis sur cet espace</a>.</em></p>
<p>Si vous avez eu l’occasion dans votre carrière d’utiliser Flash ou — soyons fous — des <a href="https://fr.wikipedia.org/wiki/Applet_Java">applets Java</a>, vous êtes déjà familier avec la notion de composant. Il s’agit d’un élément de base pouvant être réutilisé, assemblé, combiné, étendu dans le but de faciliter un développement. Dans le cadre des <em>Web Components</em>, il s’agit d’éléments <code>HTML</code> embarquant leurs propres <code>CSS</code> et <code>JavaScript</code> afin d’avoir <strong>nativement</strong> un rendu et un comportement uniformes lors de leurs utilisations dans une page ou une application web. Un composant peut aller d’un simple bouton à un <em>widget</em> complet en passant par un élément non-visuel (comme une connexion <em>AJAX</em>) mais nous allons détailler tout cela par la suite.</p>
<p><strong>Attention :</strong> les <em>Web Components</em> sont encore en cours de spécification et les <em>polyfills</em> comme <em>X-Tag</em> ou <em>Polymer</em> dont il est question dans la suite de l’article évoluent très vite. Il est pour l’instant déconseillé d’utiliser ces technologies en production car elles sont relativement instables, on vous aura prévenu(e)s !</p>
<h2>Des concepts en cours de standardisation…</h2>
<p>Poussés par l’équipe Chrome de Google, les <em>Web Components</em> sont <a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">en cours de standardisation</a> via le processus classique du W3C, à l’état de brouillon. Le modèle de composant se découpe en 5 parties :</p>
<ul>
<li><strong>Les templates</strong> : permettent de définir des fragments de <code>HTML</code> pour une utilisation future sans qu’ils soient interprétés ;</li>
<li><strong>Les décorateurs</strong> : pour styler les <em>templates</em> sans que les styles <code>CSS</code> s’appliquent aux autres éléments de la page ;</li>
<li><strong>Les custom elements</strong> : pour permettre aux développeurs de définir leurs propres éléments avec leurs propres tags <code>HTML</code> ;</li>
<li><strong>Le Shadow DOM</strong> : qui encapsule un élément complet <a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/">à la manière des widgets natifs des navigateurs</a> ;</li>
<li><strong>Les imports</strong> : afin de pouvoir charger des <em>composants</em> depuis une adresse distante.</li>
</ul>
<p>Note : d’autres innovations sont en cours d’exploration comme les <em>Pointers Events</em>, les <em>Web Animations</em> ou les <em>Model Driven View</em> mais ça commence à faire beaucoup pour un seul article !</p>
<p>À ces spécifications s’ajoute le fait de pouvoir <a href="http://weblog.bocoup.com/javascript-object-observe/">observer un objet</a> <code>JavaScript</code> grâce à <code>Object.observe</code> (ou <em>Mutation Observers</em> si vous voulez briller en société) et modifier le DOM à la volée.</p>
<h2>…mais des fonctionnalités déjà utilisables !</h2>
<p>Ces spécifications ne sont bien évidement pas encore implémentées dans les navigateurs — même très récents — c’est pourquoi des équipes de développeurs courageux codent en <code>JavaScript</code> des compléments appelés <em>polyfills</em> qui miment le comportement que devrait avoir chaque navigateur s’il implémentait les spécifications des <em>Web Components</em>. Ces ajouts deviendront inutiles lorsque les différents moteurs de rendus auront travaillé sur ces spécifications.</p>
<p>Il existe 2 projets pour utiliser dès maintenant les <em>Web Components</em> : <a href="http://x-tags.org/">X-Tag</a> par Mozilla et <a href="http://www.polymer-project.org/">Polymer</a> par Google. Une compatibilité partielle est prévue entre ces deux projets et nous allons nous concentrer sur Polymer dans la suite de cet article.</p>
<h2>Une nouvelle façon de penser ses pages</h2>
<p>Si vous connaissez <a href="http://fr.slideshare.net/stubbornella/styleguide-jsconf">les concepts sous-jacents</a> des <a href="http://oocss.org/">CSS Orientées Objets</a>, sachez que les <em>Web Components</em> vont encore plus loin en proposant de véritables composants indépendants, réutilisables et pleinement fonctionnels. Ils ne se limitent pas au style mais intègrent aussi le comportement, autrement dit la logique qui régit le cycle de vie du composant et ses interactions avec l’utilisateur.</p>
<p>Si ces dernières années ont fait la part belle aux <em>frameworks</em> <code>CSS</code> comme <a href="http://twitter.github.io/bootstrap/">Bootstrap</a>, <a href="http://foundation.zurb.com/">Foundation</a> ou <a href="http://purecss.io/">Pure</a>, <strong>ces prochains mois vont voir l’émergence de <em>toolkits</em> proposant des briques de composants aux styles unifiés et aux comportement extensibles.</strong> Certains projets comme <a href="http://mozilla.github.io/brick/">Brick</a> ou <a href="http://janmiksovsky.github.io/quetzal/">Quetzal</a> ont d’ailleurs vu le jour dans ce sens. Mais assez de théorie et voyons voir ce à quoi ressemble concrètement un composant web.</p>
<h2>Un exemple d’application</h2>
<p>Nous allons créer un composant permettant d’afficher de manière synthétique les informations relatives à un dépôt Github sur ces propres pages. C’est ce que fait déjà plus ou moins le plugin <a href="https://github.com/JoelSutherland/GitHub-jQuery-Repo-Widget">GitHub jQuery Repo Widget</a> dont nous allons nous inspirer.</p>
<p>Notre objectif est de pouvoir intégrer facilement le composant dans nos pages de la manière suivante :</p>
<div class="wp_syntax"><table><tr><td class="code"><pre class="html5" style="font-family:monospace;"><span style="color: #009900;">&lt;github-repository repository<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;scopyleft/web-components&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span>github-repository&gt;</span></pre></td></tr></table></div>

<p>Cette simple ligne devant afficher le composant relatif au dépôt passé en paramètre avec les styles dédiés et un chargement dynamique des informations en JavaScript. La première étape est de créer notre page <code>HTML 5</code>, appelons-la dans un excès d’originalité <code>index.html</code> :</p>
<div class="wp_syntax"><table><tr><td class="code"><pre class="html5" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;polymer.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;import&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;github-repository.html&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
    <span style="color: #009900;">&lt;github-repository repository<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;scopyleft/web-components&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span>github-repository&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></pre></td></tr></table></div>

<p>On commence par charger la bibliothèque <code>polymer.min.js</code> (ce fichier s’appelle actuellement <code>polymer-v0.0.20130912.min.js</code> si vous téléchargez l’archive directement sur le site) et on importe l’élément <code>github-repository</code> depuis une autre page web au nom éponyme (cela n’est pas obligatoire mais c’est une bonne pratique pour avoir des composants réutilisables). On peut maintenant lancer un serveur local, si vous avez Python il suffit de taper cette commande dans le dossier contenant le fichier <code>index.html</code> nouvellement créé :</p>
<div class="wp_syntax"><table><tr><td class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #666666;">$ </span>python <span style="color: #660033;">-m</span> SimpleHTTPServer <span style="color: #000000;">8765</span></pre></td></tr></table></div>

<p>Si vous n’avez pas python, vous pouvez configurer un serveur Apache ou n’importe quelle solution permettant de servir des pages web depuis le dossier courant.</p>
<p>En accédant à <code>http://localhost:8765</code> vous devriez avoir une page blanche et la console devrait vous indiquer que l’URL <code>github-repository.html</code> vous renvoie une 404. Normal, nous ne l’avons pas encore créée ! Créons ce fichier localement en commençant notre composant avec un attribut <code>repository</code> puisque l’on souhaite le rendre dynamique :</p>
<div class="wp_syntax"><table><tr><td class="code"><pre class="html5" style="font-family:monospace;"><span style="color: #009900;">&lt;polymer-element <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;github-repository&quot;</span> attributes<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;repository&quot;</span>&gt;</span></pre></td></tr></table></div>

<p>Il est ensuite composé de 2 parties, la première contenant les styles et le html sous la balise <code>template</code> :</p>
<div class="wp_syntax"><table><tr><td class="code"><pre class="html5" style="font-family:monospace;"><span style="color: #009900;">&lt;template&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;</span>
  @host {
 :scope {font-family:helvetica,arial,sans-serif;font-size:13px;line-height:18px;background:#fafafa;border:1px solid #ddd;color:#666;border-radius:3px}
 :scope a{color:#4183c4;border:0;text-decoration:none}
 :scope.github-box-title{position:relative;border-bottom:1px solid #ddd;border-radius:3px 3px 0 0;background:#fcfcfc;background:-moz-linear-gradient(#fcfcfc,#ebebeb);background:-webkit-linear-gradient(#fcfcfc,#ebebeb);}
 :scope.github-box-title h3{font-family:helvetica,arial,sans-serif;font-weight:normal;font-size:16px;color:gray;margin:0;padding:10px 10px 10px 30px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAXCAMAAAAx3e/WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQjIyNkJERkM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQjIyNkJFMEM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRCMjI2QkREQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRCMjI2QkRFQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dka2KgAAAEVQTFRFxMTEyMjI0tLSvb29vr6+zc3Ny8vLxcXFz8/P6enp3t7ex8fH0dHR1NTUw8PDwMDAzs7OvLy8wcHBu7u7v7+/zMzM////budQFwAAABd0Uk5T/////////////////////////////wDmQOZeAAAAcklEQVR42tSQSQ7DMAwD6chOukWs5eX/Ty2coo0T9wOdEzEgdRBuzNmnDofgja52JDyz5TCqUp0O6kfrb4bzSXkRiTviEZZ6JKLMJ5VQ2v8iGbtbfEwXmjFMG0VwdQo10hQNxYqtLMv9O6xvpZ/QeAkwAKjwHiJLaJc3AAAAAElFTkSuQmCC') 7px center no-repeat}
 :scope.github-box-title h3.repo{font-weight:bold}
 :scope.github-box-title.github-stats{position:absolute;top:8px;right:10px;background:white;border:1px solid #ddd;border-radius:3px;font-size:11px;font-weight:bold;line-height:21px;height:21px}
 :scope.github-box-title.github-stats a{display:inline-block;height:21px;color:#666;padding:0 5px 0 18px;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAqCAMAAACEJ4viAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQjIyNkJEQkM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQjIyNkJEQ0M0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRCMjI2QkQ5QzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRCMjI2QkRBQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+h1kA9gAAAK5QTFRF+fn5sbGx8fHx09PTmpqa2dnZ/f3919fX9PT00NDQ1dXVpKSk+vr6+/v7vb298vLyycnJ8/PztLS0zc3N6enp/v7+q6ur2NjY9/f3srKy/Pz8p6en7u7uoaGhnJyc4eHhtbW1pqam6Ojo9fX17e3toqKirKys1NTUzs7Ox8fHwcHBwMDA5eXlnZ2dpaWl0dHR9vb25ubm4uLi3d3dqqqqwsLCv7+/oKCgmZmZ////8yEsbwAAAMBJREFUeNrE0tcOgjAUBuDSliUoMhTEvfdef9//xUQjgaLX0Ium/ZLT/+SkRPxZpGykvuf5VMJogy5jY9yjDHcWFhqlcRuHc4o6B1QK0BDg+hcZgNDh3NWTwzItH/bRrhvT+g3zSxZkNGCZpoWGIbU0a3Y6zV5VA6keyeDxiw62P0gUqEW0FbDim4nVikFJbU2zZXybUEaxhCqOQqyh5/G0wpWICUwthyqwD4InOMuXJ7/gs7WkoPdVg1vykF8CDACEFanKO3aSYwAAAABJRU5ErkJggg==') no-repeat}
 :scope.github-box-title.github-stats.watchers{border-right:1px solid #ddd}
 :scope.github-box-title.github-stats.forks{background-position:-4px -21px;padding-left:15px}
 :scope.github-box-content{padding:10px;font-weight:300}
 :scope.github-box-content p{margin:0}
 :scope.github-box-content.link{font-weight:bold}
 :scope.github-box-download{position:relative;border-top:1px solid #ddd;background:white;border-radius:0 0 3px 3px;padding:10px;height:24px}
 :scope.github-box-download.updated{margin:0;font-size:11px;color:#666;line-height:24px;font-weight:300}
 :scope.github-box-download.updated strong{font-weight:bold;color:#000}
 :scope.github-box-download.download{position:absolute;display:block;top:10px;right:10px;height:24px;line-height:24px;font-size:12px;color:#666;font-weight:bold;text-shadow:0 1px 0 rgba(255,255,255,0.9);padding:0 10px;border:1px solid #ddd;border-bottom-color:#bbb;border-radius:3px;background:#f5f5f5;background:-moz-linear-gradient(#f5f5f5,#e5e5e5);background:-webkit-linear-gradient(#f5f5f5,#e5e5e5);}
 :scope.github-box-download.download:hover{color:#527894;border-color:#cfe3ed;border-bottom-color:#9fc7db;background:#f1f7fa;background:-moz-linear-gradient(#f1f7fa,#dbeaf1);background:-webkit-linear-gradient(#f1f7fa,#dbeaf1);}
  }
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;repo&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width: {{ width }}&quot;</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;github-box-title&quot;</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
              <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;owner&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;{{ ownerUrl }}&quot;</span>&gt;</span>{{ login }}<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
              /
              <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;repo&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;{{ repoUrl }}&quot;</span>&gt;</span>{{ name }}<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;github-stats&quot;</span>&gt;</span>
              <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;watchers&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;{{ watchersUrl }}&quot;</span>&gt;</span>{{ watchers }}<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
              <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;forks&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;{{ forksUrl }}&quot;</span>&gt;</span>{{ forks }}<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;github-box-content&quot;</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;description&quot;</span>&gt;</span>{{ description }} <span style="color: #ddbb00;">&amp;mdash;</span> <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;{{ readmeUrl }}&quot;</span>&gt;</span>Read More<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;link&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;{{ homepage }}&quot;</span>&gt;</span>{{ homepage }}<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;github-box-download&quot;</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;updated&quot;</span>&gt;</span>Latest commit to the <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>master<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">strong</span>&gt;</span> branch on {{ pushedAt }}<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
          <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;download&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;{{ downloadUrl }}&quot;</span>&gt;</span>Download as zip<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
      <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>template&gt;</span></pre></td></tr></table></div>

<p>Cela fait beaucoup d’information mais il ne faut pas s’affoler, les <code>CSS</code> sont assez verbeuses car elles intègrent les images mais sont juste là pour définir les styles propres à Github. Il s’agit de déclaration classiques qui peuvent être <em>inline</em> comme ici ou plus aérées. La seule particularité est relative à la combinaison du <code>@host</code> et du <code>:scope</code> qui permettent de restreindre les styles au composant, pratique lorsque l’on souhaite intégrer des composants de plusieurs provenances ! Il est possible de remplacer le <code>:scope</code> par un <code>id</code> sur la <code>div</code> principale mais cela est moins élégant (notez que <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=22390">la syntaxe pourrait changer prochainement</a>).</p>
<p>La partie <code>HTML</code> est plus intéressante avec l’utilisation de variables écrites entre <code>{{ }}</code>, syntaxe avec laquelle vous êtes peut-être déjà familier. Celles-ci seront complétées directement avec le <code>JavaScript</code> qui est inséré à la suite du fichier dans une balise <code>&lt;script&gt;</code> :</p>
<div class="wp_syntax"><table><tr><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
  Polymer<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'github-repository'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
    width<span style="color: #339933;">:</span> <span style="color: #3366CC;">'500px'</span><span style="color: #339933;">,</span>
    created<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">vendorName</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">repository</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
      <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">repoName</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">repository</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    enteredView<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">var</span> url <span style="color: #339933;">=</span> <span style="color: #3366CC;">'https://api.github.com/repos/'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">repository</span><span style="color: #339933;">,</span>
          httpRequest <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
          self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
      httpRequest.<span style="color: #660066;">open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'GET'</span><span style="color: #339933;">,</span> url<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      httpRequest.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      httpRequest.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">status</span> <span style="color: #339933;">!==</span> <span style="color: #CC0000;">200</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">readyState</span> <span style="color: #339933;">!==</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000066; font-weight: bold;">var</span> repo <span style="color: #339933;">=</span> JSON.<span style="color: #660066;">parse</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">responseText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">login</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">owner</span>.<span style="color: #660066;">login</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">ownerUrl</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">owner</span>.<span style="color: #660066;">html_url</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">name</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">name</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">repoUrl</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">html_url</span>
        self.<span style="color: #660066;">watchers</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">watchers</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">watchersUrl</span> <span style="color: #339933;">=</span> self.<span style="color: #660066;">repoUrl</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;/watchers&quot;</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">forks</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">forks</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">forksUrl</span> <span style="color: #339933;">=</span> self.<span style="color: #660066;">repoUrl</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;/forks&quot;</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">description</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">description</span><span style="color: #339933;">;</span>
        self.<span style="color: #660066;">homepage</span> <span style="color: #339933;">=</span> repo.<span style="color: #660066;">homepage</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>repo.<span style="color: #660066;">has_wiki</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          self.<span style="color: #660066;">readmeUrl</span> <span style="color: #339933;">=</span> self.<span style="color: #660066;">repoUrl</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;#readme&quot;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>repo.<span style="color: #660066;">pushed_at</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          date <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">new</span> <span style="">Date</span><span style="color: #009900;">&#40;</span>repo.<span style="color: #660066;">pushed_at</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">function</span> pad<span style="color: #009900;">&#40;</span>n<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span> n<span style="color: #339933;">&lt;</span><span style="color: #CC0000;">10</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'0'</span><span style="color: #339933;">+</span>n <span style="color: #339933;">:</span> n <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
          self.<span style="color: #660066;">pushedAt</span> <span style="color: #339933;">=</span> date.<span style="color: #660066;">getFullYear</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'-'</span> <span style="color: #339933;">+</span> pad<span style="color: #009900;">&#40;</span>date.<span style="color: #660066;">getMonth</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'-'</span> <span style="color: #339933;">+</span> pad<span style="color: #009900;">&#40;</span>date.<span style="color: #660066;">getDate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        self.<span style="color: #660066;">downloadUrl</span> <span style="color: #339933;">=</span> self.<span style="color: #660066;">repoUrl</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;/zipball/master&quot;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>On commence par définir la largeur par défaut du composant, avec une valeur par défaut de 500 pixels (le lecteur bidouilleur pourra tenter de rendre cette valeur dynamique en la passant en attribut). La fonction <code>created</code> est appelée à l’instanciation et permet de définir le nom d’utilisateur et le dépôt concernés.</p>
<p>La fonction <code>enteredView</code> est la plus intéressante car elle permet d’effectuer la requête <code>AJAX</code> récupérant les informations du dépôt et de remplacer <em>automagiquement</em> celles-ci dans le <code>template</code> précédemment défini.</p>
<p>On n’oublie bien évidemment pas de refermer la balise <code>&lt;/polymer-element&gt;</code> à la fin de notre fichier. En rafraichissant la page, vous devriez apercevoir votre composant apparaître avec les informations relatives au dépôt que vous avez renseigné en attribut du composant (ici <code>scopyleft/web-components</code>).</p>
<h2>Et la suite ?</h2>
<p>Deux vidéos en anglais d’interventions réalisées dans le cadre de Google I/O font référence à ce jour et permettent de voir les exemples en pratique si vous n’êtes pas encore prêt(e) à mettre les mains dans le code :</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=fqULJBBEVQE">Web Components: A Tectonic Shift for Web Development</a></li>
<li><a href="https://www.youtube.com/watch?v=0g0oOOT86NY">Web Components in Action</a></li>
</ul>
<p>Miško Hevery, l’un des co-créateurs d’<a href="http://angularjs.org/">AngularJS</a>, s’est déjà prononcé en faveur d’une intégration partielle et d’une compatibilité avec les <em>Web Components</em> développé avec Polymer pour la version 2.0 du framework <a href="https://groups.google.com/forum/#!msg/polymer-dev/4RSYaKmbtEk/uYnY3900wpIJ">sur la liste de diffusion du développement de Polymer</a>.</p>
<p>En ce qui concerne <a href="http://emberjs.com/">EmberJS</a>, c’est plus compliqué en raison des problématiques de performances que cela entraîne mais <a href="https://gist.github.com/wycats/9144666b0c606d1838be">l’objectif à long terme</a> est d’être compatible également.</p>
<p>Autant d’encouragements pour développer (et <a href="http://customelements.io/">partager</a>) dès à présent votre <em>toolkit</em> de composants web afin de passer <a href="http://bradfrostweb.com/blog/post/atomic-web-design/">d’un développement atomique</a> à un développement moléculaire ! Les <em>Web Components</em> ont certainement <a href="http://insideintercom.io/why-cards-are-the-future-of-the-web/">leur carte à jouer</a> dans l’avenir du Web et de ses interactions.</p>
</article>


<nav id="jumpto">
  <p>
    <a rel=prev href="/david/blog/2013/donnees-intimes/">← Données intimes</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/confort-convivialite/">Confort et convivialité →</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>

      <p>
        Les dernières publications hebdomadaires sont :
      </p>
      <ul class="with_columns">

          <li>
            <a href="/david/stream/2019/12/31/">Merci</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/27/">Intemporels</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/24/">Outils</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/17/">Origines</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/10/">Publier</a>
          </li>

          <li>
            <a href="/david/stream/2019/12/03/">En forêt</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/26/">Ecocentric</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/19/">Se livrer</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/12/">Dépendances</a>
          </li>

          <li>
            <a href="/david/stream/2019/11/05/">Positif</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/29/">Dettes</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/22/">Privilèges</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/15/">Discrétion</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/08/">Désespérance</a>
          </li>

          <li>
            <a href="/david/stream/2019/10/01/">Présent</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/24/">Manifester</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/17/">Arpenter</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/10/">Nostalgie</a>
          </li>

          <li>
            <a href="/david/stream/2019/09/03/">Déconstruire</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/27/">Documenter</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/20/">Frustration</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/13/">Holisme</a>
          </li>

          <li>
            <a href="/david/stream/2019/08/06/">1%</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/30/">Exemplarité</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/23/">Timelines</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/16/">Écoute</a>
          </li>

          <li>
            <a href="/david/stream/2019/07/02/">Anxiété</a>
          </li>

          <li>
            <a href="/david/stream/2019/06/21/">À lier</a>
          </li>

          <li>
            <a href="/david/stream/2019/06/14/">Pauvreté</a>
          </li>

          <li>
            <a href="/david/stream/2019/06/07/">Amateur</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/31/">Pollution</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/24/">Apaisement</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/10/">Folie</a>
          </li>

          <li>
            <a href="/david/stream/2019/05/03/">Sympathie</a>
          </li>

          <li>
            <a href="/david/stream/2019/04/12/">Péremption</a>
          </li>

          <li>
            <a href="/david/stream/2019/04/05/">Définitions</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/29/">Acceptation</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/22/">Dissonance</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/15/">Reconnaissance</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/08/">Lecture</a>
          </li>

          <li>
            <a href="/david/stream/2019/03/01/">Journaux</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/22/">Écriture</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/15/">Kyriarchie</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/08/">Mots-serrures</a>
          </li>

          <li>
            <a href="/david/stream/2019/02/01/">Sans voie</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/18/">Agilité</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/11/">Métaphores</a>
          </li>

          <li>
            <a href="/david/stream/2019/01/04/">Balbutiements</a>
          </li>

      </ul>

    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>

  <script>
  /* Service workers */
  if (navigator.serviceWorker) {
    window.addEventListener('load', function () {
      var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
      function sendLinks (selector) {
        var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
          return link.getAttribute('href')
        })
        links.push(location.pathname)  // Put the current page in cache too.
        navigator.serviceWorker.controller.postMessage({ links: links })
      }
      navigator.serviceWorker.getRegistration()
        .then(function (registration) {
          if (!registration || !navigator.serviceWorker.controller) {
            return navigator.serviceWorker.register('/serviceworker.js')
              .then(navigator.serviceWorker.ready)
              .then(function () {
                console.log('[ServiceWorker] Ready to go!')
              })
              .catch(console.error.bind(console))
          } else {
            console.log('[ServiceWorker] Send links via registration')
            sendLinks(selector)
          }
        })
      navigator.serviceWorker.addEventListener('controllerchange', function () {
        console.log('[ServiceWorker] Send links via controller change')
        sendLinks(selector)
      })
      navigator.serviceWorker.addEventListener('message', function (event) {
        var link = document.querySelector('a[href="' + event.data.link + '"]')
        if (event.data.status && link) {
          link.style.backgroundColor = '#2d7474'
          link.style.color = '#f0f0ea'

            link.setAttribute('title', 'En cache pour consultation sans connexion')

        }
      })
    })
  } else {
    console.warn('[ServiceWorker] No cache for old browsers.')
  }
</script>