Three ways to use angular encapsulation

Little scum · Posted on 5/12/2020 11:02:24 AM

According to the latest version of the official website documentation, encapsulation now has 4 attribute values:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

Emulated default

Styles are scoped and the parent component does not affect the style of the child component (the style encapsulation mechanism provided by Angular)
This selection is the default, i.e., it is the value without manually configuring encapsulation. Under this configuration item, each component has a scope, and the parent component cannot affect the self-component. If you have to have the style of the parent component override the style of the child component under this configuration item. You can use ::ng-deep, but the official website does not recommend using ::ng-deep

None

No package is provided, and the style is applied directly to the entire document. (Affects its own child components downwards, upwards affects its own parent components)

Native and Shadow

Using the native shadow encapsulation style, the shadow-root can be seen in the DOM structure, and we can see very well how the style is written to it, only valid for components in the shadow-root range.

Little scum · Posted on 11/26/2021 5:07:13 PM

Login is visible.

[Angular] Three ways to use angular encapsulation

Related Posts

Sections viewed