anchor.diff:        Users of module bundlers like Webpack may also use the `styles` attribute
         to load styles from external files at build time. They could write:
   
  -      像Webpack这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。它们可能这样写：
  +      像 Webpack 这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。它们可能这样写：
   
         `styles: [require('my.component.css')]`
   
  
positive.code:   These extra selectors enable the scoping rules described in this guide.
    
    这些就是我们写的那些样式被处理后的结果，于是每个选择器都被增加了`_nghost`或`_ngcontent`属性选择器。
    在这些附加选择器的帮助下，我们实现了本指南中所描述的这些局限化规则。
  
    We'll likely live with *emulated* mode until shadow DOM gains traction.
    
    小伙伴们会很愉快的使用*仿真*模式 —— 直到有一天Shadow DOM获得全面支持。
  
  a#relative-urls
  .l-main-section
  :marked
    ## Appendix 2: Loading Styles with Relative URLs
    ## 附录2：使用相对URL加载样式
  
    It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
    
    把组件的代码(ts/js)、HTML和CSS分别放到同一个目录下的三个不同文件，是一个常用的实践：
  
  code-example(format='').
    quest-summary.component.ts
  
negative.code: .l-main-section
  :marked
    ## Controlling View Encapsulation: Native, Emulated, and None
  
    ## 控制视图的封装模式：原生 (Native)、仿真 (Emulated) 和无 (None)
  
    As discussed above, component CSS styles are *encapsulated* into the component's own view and do
    not affect the rest of the application.
    
    像上面讨论过的一样，组件的 CSS 样式被封装进了自己的视图中，而不会影响到应用程序的其它部分。
  
    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:
    
    通过在组件的元数据上设置*视图封装模式*，我们可以分别控制*每个组件*的封装模式。
    可选的封装模式一共有三种：
  
    * `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`模式使用浏览器原生的 [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
      实现来为组件的宿主元素附加一个 Shadow DOM。组件的样式被包裹在这个 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`模式（**默认值**）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。
      更多信息，见[附录 1](#inspect-generated-css) 。(译注：只进不出，全局样式能进来，组件样式出不去)
  
    * `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`意味着 Angular 不使用视图封装。
      Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。
      从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)
  
    Set the components encapsulation mode using the `encapsulation` property in the component metadata:
    
    通过组件元数据中的`encapsulation`属性来设置组件封装模式：
  
  +makeExample('component-styles/ts/app/quest-summary.component.ts', 'encapsulation.native')(format='.')
  
  