background

To upgrade Angular1 to Angular8, move through the portal. Core Angular8 idea: Modularity; each component maintains its own style.

Style to upgrade

Angular1 code

.parent-container{.demo-container {.items{..... }}}Copy the code

Angular1 compiled

.parent-container{
 ....
}
.parent-container .demo-container{
 ....
}
.parent-container .demo-container .items{
 ....
}
Copy the code

Angular8 style encapsulation

  • ShadowDom: The host element of the component appends a ShadowDom for style identification. Limited support.
  • None: No style encapsulation is performed and exposed as a global style.
  • Native: has been abandoned.
  • Emulated: Mode (default), CSS style rename, and then uniquely identified. In this case, for the element dynamically added by JS, use :host, ::ng-deep to maintain the hierarchical relationship.

Angular8 styles need to be split

Each component maintains its own style selector corresponding to HTML

.parent-container{
 ...
}
Copy the code
// Child component SCSS file definition.demo-container{.items{.... }}Copy the code

Angular8 dynamic element styles do not take effect

.demo-container{ .items{ .... }}Copy the code
// Use the default Emulated mode. In this case, the style will not take effect for dynamically added elements. [_nghost-kjf-c2]. Demo-container [_ngContent-kjf-c2]{.... } [_nghost-kjf-c2] .demo-container[_ngcontent-kjf-c2] .items[_ngcontent-kjf-c2] { .... }Copy the code

Angular8 dynamic element styles are in effect

:host ::ng-deep .demo-container{ .items{ .... }}Copy the code
// add :host ::ng-deep, do not affect the hierarchy because of the rename, compile as follows [_nghost-svo-c2].demo-container{.... } [_nghost-svo-c2] .demo-container .items { ... }Copy the code

reference

Angular Style encapsulation

By CheongHu, Chief Front-end Experiencer

Contact email: [email protected]