在介紹 ViewEncapsulation 之前，我們先來介紹一下 Web Components 標準。
Web Components
近年來，Web 開發(fā)者們通過插件或者模塊的形式在網(wǎng)上分享自己的代碼，便于其他開發(fā)者們復用這些優(yōu)秀的代碼。同樣的故事不斷發(fā)生，人們不斷的復用 JavaScript 文件，然后是 CSS 文件，當然還有 HTML 片段。但是你又必須祈禱這些引入的代碼不會影響到你的網(wǎng)站或者 Web App。
Web Components 是解決這類問題最好的良藥，它通過一種標準化的非侵入的方式封裝一個組件，每個組件能組織好它自身的 HTML 結構、CSS 樣式、JavaScript 代碼，并且不會干擾頁面上的其他元素。
Web Components 由以下四種技術組成：
- Custom Elements - 自定義元素
- HTML Templates - HTML模板
- Shadow DOM - 影子DOM
- HTML Imports - HTML導入
因為 Shadow DOM 與 Angular ViewEncapsulation 相關， 所以這篇文章我們主要介紹 Shadow DOM 相關的內容。
Shadow DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shadow DOM</title>
<style type="text/css">
.shadowroot_son {
color: #f00;
}
</style>
</head>
<body>
<p class="shadowroot_son">我不在 Shadow Host內</p>
<div class="shadowhost">Hello, world!</div>
<script>
// 影子宿主（shadow host）
var shadowHost = document.querySelector('.shadowhost');
// 創(chuàng)建影子根（shadow root）
var shadowRoot = shadowHost.createShadowRoot();
// 影子根作為影子樹的第一個節(jié)點，其他的節(jié)點比如p節(jié)點都是它的子節(jié)點。
shadowRoot.innerHTML = '<p class="shadowroot_son">我在 Shadow Host內</p>';
</script>
</body>
<html>
以上代碼成功運行后，如下圖：
我們發(fā)現(xiàn)在 #shadow-root 中的元素，不受我們外界定義的 CSS shadowroot_son 類影響。因此我們可以利用 Shadow DOM 來封裝我們自定義的 HTML 標簽、CSS 樣式和 JavaScript 代碼。需要注意的是 Shadow DOM 兼容性還不是很好，具體請參考 - Can I Use Shadow DOM 。
接下來我們開始介紹 Angular ViewEncapsulation Modes：
ViewEncapsulation
ViewEncapsulation 允許設置三個可選的值：
- ViewEncapsulation.Emulated - 無 Shadow DOM，但是通過 Angular 提供的樣式包裝機制來封裝組件，使得組件的樣式不受外部影響。這是 Angular 的默認設置。
- ViewEncapsulation.Native - 使用原生的 Shadow DOM 特性
- ViewEncapsulation.None - 無 Shadow DOM，并且也無樣式包裝
ViewEncapsulation 枚舉定義：
export enum ViewEncapsulation {
Emulated, // 默認值
Native,
None
}
ViewEncapsulation.None
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h4>Welcome to Angular World</h4>
<p class="greet">Hello {{name}}</p>
`,
styles: [`
.greet {
background: #369;
color: white;
}
`],
encapsulation: ViewEncapsulation.None // None | Emulated | Native
})
export class AppComponent {
name: string = 'Semlinker';
}
運行后的結果：
ViewEncapsulation.None 設置的結果是沒有 Shadow DOM，并且所有的樣式都應用到整個 document，換句話說，組件的樣式會受外界影響，可能被覆蓋掉。
ViewEncapsulation.Emulated
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
...,
encapsulation: ViewEncapsulation.Emulated // None | Emulated | Native
})
export class AppComponent {
name: string = 'Semlinker';
}
運行后的結果：
ViewEncapsulation.Emulated 設置的結果是沒有 Shadow DOM，但是通過 Angular 提供的樣式包裝機制來封裝組件，使得組件的樣式不受外部影響。雖然樣式仍然是應用到整個 document，但 Angular 為 .greet 類創(chuàng)建了一個 [_ngcontent-cmy-0] 選擇器。可以看出，我們?yōu)榻M件定義的樣式，被 Angular 修改了。其中的 _nghost-cmy-* 和 _ngcontent-cmy-* 用來實現(xiàn)局部的樣式。
ViewEncapsulation.Native
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
...,
encapsulation: ViewEncapsulation.Native // None | Emulated | Native
})
export class AppComponent {
name: string = 'Semlinker';
}
運行后的結果：
ViewEncapsulation.Native 設置的結果是使用原生的 Shadow DOM 特性。Angular 會把組件按照瀏覽器支持的 Shadow DOM 形式渲染，渲染結果如上圖所示。
