可搭配官網文章「Controlling View Encapsulation: Native, Emulated, and None」做閱讀。

@Component({
  selector: 'my-app',
  template: `
    <div class="card card-block">
      <h4>Title</h4>
    </div>
  `,
  styles:[`
  	.card { background-color:gray;} 
    //card是bootstrap 4內建的css component class
  `]      
})
export class MyAppComponent { }

這樣的寫法，可以把CSS styles封裝在元件自己的View，而且不影響應用程式其他部分

此外，我們可以控制view encapsulation mode來設定元件的樣式要如何封裝。

• Native

它會使用瀏覧器內建支援的Shadow DOM實作規格的功能

元件的View及樣式只會封裝在Shadow DOM，不會被暴露出來

但這個功能只作用在有內建支援Shadow DOM的瀏覧器上，目前這個支援不是很廣泛

所以Angular2是預設使用下一個要介紹的「Emulated」，直到內建可用Shadow DOM為止。

• Emulated (the default)

設定此模式後，Angular2會透過rename或是增加prefix，來修改class name

用以做出類似Shadow DOM的方式，Render出來的HTML會像下面這個樣子

<my-app _nghost-ric-0="">
    <div _ngcontent-ric-0="" class="card card-block">
      <h4 _ngcontent-ric-0="">Title</h4>
    </div>
</my-app>

• None

表示Angular2不會做任何的View Encapsulation，它會直接把這段CSS加到Global Styles

所有有用到的Card Class的元件都可能會被這個元件的樣式設定所影響到！

大家可以用我設定的Plunker的程式碼玩玩