Angular2組件開發—爲模板應用樣式（二）

時間 2019-12-10

標籤 angular2 angular 組件開發模板應用樣式欄目 AngularJS 简体版

原文原文鏈接

ShadowDom - 封裝私有樣式

Angular2採用ShadowDom做爲組件的渲染基礎，這意味着組件被渲染到獨立的Shadow Tree上，這很好，能夠實現DOM對象和樣式的良好封裝：javascript

但問題是，除了Chrome以外的大多數的瀏覽器目前還不支持ShadowDom，所以，Angular2 提供了三種將模板渲染到DOM的策略。html

如下面的模板爲例，咱們看三種策略下的渲染結果差別：java

1 @View{
2     template:"<h1>hello</h1>",
3     styles:["h1{color:red}"]
4 }

全局仿真策略/EmulatedUnscopedShadowDomStrategybootstrap

採用這個策略時，Angular2將模板直接插入DOM樹，並將模板的樣式原封不動地插入head頭部。這意味着不一樣組件之間的樣式可能衝突 : 在右邊的示例代碼中，你能夠清楚的看到，EzApp組件的h1樣式污染了其餘的 h1元素，全部的h1都變成紅色了。瀏覽器

示例代碼渲染後的DOM以下：angular2

這個策略不須要瀏覽器原生支持ShadowDom，是當前版本（alpha.28）的默認策略。app

做用域仿真策略/EmulatedScopedShadowDomStrategydom

採用這個策略時，Angular2將模板直接插入DOM樹，對模板的樣式從新定義CSS選擇符後插入head頭部。因爲樣式進行了重命名，因此不一樣組件之間的樣式不會衝突。spa

示例代碼在這個策略下的渲染結果是：3d

這個策略也不須要瀏覽器原生支持ShadowDom。

原生策略/NativeShadowDomStrategy

採用這個策略時，Angular2將在組件的宿主DOM對象上創建一個ShadowDom樹，這顆樹與主DOM樹是隔離的，因此，這是實現Web組件的理想方案：

若是瀏覽器原生支持ShadowDom，那麼應當使用這個策略。

例如：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>template - shadowdom strategy</title>
 6     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
 7     <script type="text/javascript" src="lib/angular2.dev.js"></script>
 8     <script type="text/javascript" src="lib/system.config.js"></script>
 9 </head>
10 <body>
11     <h1>我是H1，我在組件外</h1>
12     <ez-app></ez-app>
13     
14     <script type="module">
15         import {bind,Component,View,bootstrap} from "angular2/angular2";
16 
17         @Component({selector:"ez-app"})
18         @View({
19             template:"<h2>我是H2，我在組件內</h2>",
20             styles:["h2{color:red}"]
21         })
22         class EzApp{}
23                 
24         bootstrap(EzApp);
25 
26     </script>
27 </body>
28 </html>