Angular学习笔记之-2.视图包装

ShadowDom

模式使用浏览器原生的 Shadow DOM 实现（参阅 MDN 上的 Shadow DOM）来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中。(译注：不进不出，没有样式能进来，组件样式出不去。)

Emulated 模式（默认值）

通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。 更多信息，见附录 1。(译注：只进不出，全局样式能进来，组件样式出不去)

None

意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)

warning: few browsers support shadow DOM encapsulation at this time

for-example

  import { ViewEncapsulation } from '@angular/core';

    @Component({
        selector: 'after-view',
        /* 	
        	ShadowDom -- 样式不进不出，全局样式、组件样式完全隔离 
        	Emulated -- 样式只进不出，全局样式可以进入组件，但是组件样式不能进入全局 
        	  None -- 样式可进可出，设置的样式可以进入到全局样式中去 */
        encapsulation: ViewEncapsulation.ShadowDom, 
        template: `
            <div>-- child view begins --</div>
            <app-child-view></app-child-view>
            <div>-- child view ends -- </div>`
        + `
            <p *ngIf="comment" class="comment">
            {{comment}}
            </p>
        `
    })