anchor.diff:    which is why `Emulated` view encapsulation is the default mode and recommended
     in most cases.
   
  +  L'encapsulation de vue `Native` ne marche que pour les [navigateurs qui supportent nativement le Shadow DOM](http://caniuse.com/#feat=shadowdom).
  +  Ce support est encore limité, c'est la raison pour laquelle l'encapsulation de vue `Emulated` est le mode par défaut et est recommandée dans
  +  la plupart des cas.
  +
  +
  +
   a#inspect-generated-css
   .l-main-section
   :marked
     ## Appendix 1: Inspecting The CSS Generated in Emulated View Encapsulation
  -  
  +
  +  ## Annexe 1: Inspection des styles de composants générés en encapsulation de vue émulée
  +
     When using the default emulated view encapsulation, Angular preprocesses
     all component styles so that they approximate the standard Shadow CSS scoping rules.
  -  
  +
  +  En mode d'encapsulation de vue émulée, Angular pré-traite tous les styles d'un composant
  +  de sorte de s'approcher des règles standard de portée du Shadow CSS.
  +
     When we inspect the DOM of a running Angular application with emulated view
     encapsulation enabled, we see that each DOM element has some extra attributes
     attached to it:
  -  
  +
  +  Quand nous inspectons le DOM d'une application Angular en cours d'éxécution avec le mode d'encapsulation de vue émulée actif,
  +  nous voyons que chaque élément du DOM a quelques attributs supplémentaires:
  +
   code-example(format="").
     &lt;hero-details _nghost-pmm-5>
       &lt;h2 _ngcontent-pmm-5>Mister Fantastic&lt;/h2>
  
positive.code:     background-color: white;
      border: 1px solid #777;
    }
    
  :marked
    These are the styles we wrote, post-processed so that each selector is augmented
    with `_nghost` or `_ngcontent` attribute selectors. 
    These extra selectors enable the scoping rules described in this guide.
    
    We'll likely live with *emulated* mode until shadow DOM gains traction.
    
  a#relative-urls
  .l-main-section
  :marked
    ## Appendix 2: Loading Styles with Relative URLs
    
    It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
    
  code-example(format='').
    quest-summary.component.ts
    quest-summary.component.html
  
negative.code:     [Controlling View Encapsulation](#view-encapsulation)
      section for more details.
  
      Les sélecteurs `/deep/` and `>>>` ne devraient être utilisés qu'avec l'encapsulation de vue **emulated**.
      Ce mode d'encapsulation est le mode par défaut et c'est celui que nous utilisons le plus souvent. Voir la section
      [Contrôle de l'Encapsulation de la Vue](#view-encapsulation) pour plus de détails.
  
  
  
  
  a(id='loading-styles')
  .l-main-section
  :marked
    ## Loading Styles into Components
  
    ## Chargement des Styles dans les Composants
  
    We have several ways to add styles to a component:
  
    Nous avons plusieurs façons d'ajouter des styles à un composant:
  
    * inline in the template HTML
    * directement dans le modèle HTML
    * by setting `styles` or `styleUrls` metadata
    * en utilisant les metadata `styles` ou `styleUrls`
    * with CSS imports
    * par importation de CSS
  
    The scoping rules outlined above apply to each of these loading patterns.
  
    Les règles de portée soulignées ci-dessous s'appliquent à chacun de ces modes de chargement.
  
    ### Styles in Metadata
  
    ### Styles dans les Metadata
  
  
    We can add a `styles` #{_array} property to the `@Component` #{_decorator}.
    Each string in the #{_array} (usually just one string) defines the CSS.
  
    Nous pouvons ajouter un tableau à la propriété `styles` du décorateur de composant `@Component`.
    Chaque chaine de caractères dans le tableau (en général une seule chaine) définit le CSS.
  
  
  +makeExample('component-styles/ts/app/hero-app.component.ts')
  
  :marked
    ### Template Inline Styles
  
    ### Styles dans le modèle HTML
  
    We can embed styles directly into the HTML template by putting them
    inside `<style>` tags.
  
    Nous pouvons ajouter des styles directement dans le modèle HTML en les mettant à l'intérieur de balises `<style>`.
  
  +makeExample('component-styles/ts/app/hero-controls.component.ts', 'inlinestyles')
  
  :marked
    ### Style URLs in Metadata
  
    ### URLs de style dans le Metadata
  
    We can load styles from external CSS files by adding a `styleUrls` attribute
    into a component's `@Component` #{_decorator}:
  
    Nous pouvons charger des styles d'un fichier externe CSS en ajoutant un attribut `styleUrls` au décorateur de composant `@Component`.
  
  +makeExample('component-styles/ts/app/hero-details.component.ts', 'styleurls')
  
  block style-url
    .alert.is-important
      :marked
        The URL is ***relative to the application root*** which is usually the
        location of the `index.html` web page that hosts the application.
        The style file URL is *not* relative to the component file.
        That's why the example URL begins `app/`.
        See [Appendix 2](#relative-urls) to specify a URL relative to the
        component file.
  
        L'URL est ***relative à la racine de l'application*** qui est en général la position
        de la page web `index.html` qui abrite l'application.
        L'URL d'un fichier de style n'est **pas** relative au fichier du composant.
        C'est la raison pour laquelle l'URL commence par `app/` dans l'exemple.
        Voir [Annexe 2](#relative-urls) pour définir une URL relative au fichier du composant.
  
  
  block module-bundlers
    .l-sub-section
      :marked
        Users of module bundlers like Webpack may also use the `styles` attribute
        to load styles from external files at build time. They could write:
        `styles: [require('my.component.css')]`
  
        Les utilisateurs de modules d'empaquetage comme webpack peuvent aussi utiliser l'attribut
        `styles` pour charger des styles depuis des fichiers externes, lors de la phase de d'empaquetage. Ils pourraient écrire:
        `styles: [require('my.component.css')]`
  
        We set the `styles` property, **not** `styleUrls` property! The module
        bundler is loading the CSS strings, not Angular.
        Angular only sees the CSS strings *after* the bundler loads them.
        To Angular it is as if we wrote the `styles` array by hand.
        Refer to the module bundler's documentation for information on
        loading CSS in this manner.
  
        Nous utilisons la propriété `styles` et **non* la propriété `styleUrls`!
        C'est module d'empaquetage qui chargera le contenu du CSS, et non Angular.
        Angular ne voit que le contenu CSS *après* que le module d'empaquetage l'ait chargé.
        Pour Angular, tout ce passe comme si nous avions écrit le tableau `styles` à la main.
        Se référer à la documentation des modules d'empaquetage pour de l'information sur le chargement de CSS selon ce procédé.
  
  :marked
    ### Template Link Tags
  
    ### Balise Link dans le modèle HTML
  
    We can also embed `<link>` tags into the component's HTML template.
  
    Nous pouvons aussi inclure des balises `<link>` dans le modèle HTML du modèle.
  
    As with `styleUrls`, the link tag's `href` URL is relative to the
    application root, not relative to the component file.
  
    Comme pour `styleUrls`, l'URL `href` de la balise link est relative à la racine de l'application, et
    non au fichier du composant.
  
  +makeExample('component-styles/ts/app/hero-team.component.ts', 'stylelink')
  
  :marked
    ### CSS @imports
  
    ### Règle CSS @imports
  
    We can also import CSS files into our CSS files by using the standard CSS
    [`@import` rule](https://developer.mozilla.org/en/docs/Web/CSS/@import).
  
    Nous pouvons aussi importer des fichiers CS dans nos fichiers CSS en utilisant le standard CSS
    [règle `@import`](https://developer.mozilla.org/fr/docs/Web/CSS/@import).
  
  block css-import-url
    :marked
      In *this* case the URL is relative to the CSS file into which we are importing.
  
      Dans *ce* cas l'URL est relative au fichier CSS dans lequel nous effectuons l'import.
  
  +makeExample('component-styles/ts/app/hero-details.component.css', 'import', 'app/hero-details.component.css (excerpt)')
  
  a#view-encapsulation
  .l-main-section
  :marked
    ## Controlling View Encapsulation: Native, Emulated, and None
  
    ## Contrôle de l'Encapsulation de la Vue: Emulée, Native, et Aucune
  
    As discussed above, component CSS styles are *encapsulated* into the component's own view and do
    not affect the rest of the application.
  
    Comme discuté ci-dessus, les styles CSS de composant sont *encapsulés* dans
    la vue du composant et n'affectent pas le reste de l'application.
  
    We can control how this encapsulation happens on a *per
    component* basis by setting the *view encapsulation mode* in the component metadata. There
    are three modes to choose from:
  
    Nous pouvons contrôler la manière dont cette encapsulation s'opère, composant par composant, à l'aide
    du *mode d'encapsulation de vue* dans les métadata du composant. Un mode parmi trois peut être choisi:
  
  
    * `Native` view encapsulation uses the browser's native [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
      implementation to attach a Shadow DOM to the component's host element, and then puts the component
      view inside that Shadow DOM. The component's styles are included within the Shadow DOM.
  
    * `Native` L'encapsulation de vue utilise l'implémentation [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
      native du navigateur, attache un Shadow DOM à l'élément hôte du composant, et met la vue du composant dans ce Shadow DOM.
      Les styles du composant sont ajoutés au Shadow DOM.
  
  
    * `Emulated` view encapsulation (**the default**) emulates the behavior of Shadow DOM by preprocessing
      (and renaming) the CSS code to effectively scope the CSS to the component's view.
      See [Appendix 1](#inspect-generated-css) for details.
  
    * `Emulated` l'encapsulation de vue (**le défaut**) émule le comportement du Shadow DOM en pré-traitant
     (et renomant) le code CSS pour réduire la portée du CSS à la vue du composant.
      Voir [Annexe 1](#inspect-generated-css) pour les détails.
  
  
    * `None` means that Angular does no view encapsulation.
      Angular adds the CSS to the global styles.
      The scoping rules, isolations, and protections discussed earlier do not apply.
      This is essentially the same as pasting the component's styles into the HTML.
  
    * `None` signifie qu'Angular ne réalise aucune encapsulation de la vue.
      Angular ajoute le CSS au styles globaux.
      Les règles de portée, isolation, et protection discutées plus haut ne s'appliquent pas.
      Cela peut se comparer à coller les styles d'un composant dans le HTML.
  
  
    Set the components encapsulation mode using the `encapsulation` property in the component metadata:
  
    Le mode d'encapsulation se paramètre à l'aide de la propriété `encapsulation` des métadata de composant.
  
  
  +makeExample('component-styles/ts/app/quest-summary.component.ts', 'encapsulation.native')(format='.')
  
  :marked
  