Angular 9 series (VII) CSS-style scope

Little scum · Posted on 6/17/2020 4:46:59 PM

Angular 9 Series (1) Dynamically Loaded Components
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 series (2) dynamic component transmission parameters
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 series (3) subscribes to dynamic component events
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Series (IV) Custom Pipe pipelines
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formats the amount currency format
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 series (VI) calls native JS variables and methods
https://www.itsvse.com/thread-9254-1-1.html

In retrospect, we tried to modify the style of the introduced third-party component before, but it was unsuccessful.

Angular setting component CSS style does not take effect solution
https://www.itsvse.com/thread-9184-1-1.html

:host represents a selector that selects the current component.
::ng-deep can ignore the nested hierarchy relationships of the intermediate className. Directly find the className you want to modify.
However, the official documentation says that ng-deep will be abandoned in future versions, and it is unknown what kind of syntax it will become in the future.

The property on top of the component can be set to styleUrls to set the css stylesheet of the current component.

The introduced stylesheet only affects the current tag element and does not affect other components, which is an important feature of the Angular framework.

CSS Code:

Login is visible.

Let's look at the final generated CSS style through the browser, as shown below:

.itsvse1[_ngcontent-serverApp-c228] {
background-color:azure;
}

[_nghost-serverApp-c228]    .itsvse2 {
background-color: green;
}

[_nghost-serverApp-c228]    .itsvse3 {
background-color: red;
}

  .itsvse4 {
background-color: aqua;
}

.itsvse1 only styles the current component, .itsvse2 and .itsvse3 affect the style of the introduced child components, and .itsvse3 affects the global style.

itsvse1 css can only affect the current component because all current node elements will add the "_ngcontent-serverapp-c228" attribute, as shown in the figure below:

(End)

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

Three ways to use angular encapsulation
https://www.itsvse.com/thread-9200-1-1.html

Login is visible.

[Angular] Angular 9 series (VII) CSS-style scope

Related Posts

Sections viewed