Angular 中 的 ViewEncapsulation

• I.e., encapsulation of Angular ViewEncapsulation
  • Native
    • Shadow DOM original browser behavior
    • Native Its role is to make the component styles do not enter, completely closed, global style can not modify the internal style;
    • It should generally not be used, because usually want an external universal style affects the interior, such as some form of bootstrap
    • Angular component will create Shadow DOM.
    • The range of styles is a component.
  • Emulated
    • Emulation mode, by Angular Shadow DOM similar to simulate the behavior of the default mode of angular
    • Emulated, its role is to make a style element of not only enter, in other words, in the style component does not affect the external components;
    • That default, Angular internal component of the style and does not affect the upper layer, the upper layer that is not operating style. After compilation, the style will not bring up.
    • Angular Shadow DOM is not created for that component
    • Style will be limited to the assembly
    • This is the default encapsulation.
  • None
    • Without any packaging behavior
    • None equivalent manner, the internal components are defined style and into and out of, relative to the global style definition. (Non-special circumstances with caution)
    • Can be used when desired pattern may be internal to an external impact, or the like when the external style of the component operations in the internal
    • No Shadow DOM.
    • Assembly is not within the range of styles.
• Keystone
  • What Angular the ViewEncapsulation that?
  • Shadow DOM and Angular the ViewEncapsulation
    • Shadow DOM of HTML elements packaged as HTML. Use Shadow DOM, tags, style and behavior is limited to the elements, and does not conflict with other nodes in the DOM. Shadow DOM is part of the Web Components, which encapsulates the elements of style and login.
    • Angular has its own simulation that can simulate Shadow DOM. To simulate Shadow DOM and package style, Angular provided View Encapsulation type.
    • In theory, Angular components are not Web Components
  • Angular component encapsulates the underlying details of the web front-end development, has become a simulated desktop applications like, each of the component as a whole, in order to reduce the complexity of development, the default style association unidirectional isolation between the component and the upper layer
• A component of the modified ViewEncapsulation

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

@Component({
  encapsulation: ViewEncapsulation.None
})