:CSS pseudo-class host ::ng-deep :host-context() /deep/ >>> Styling in Angular 2+

:host ::ng-deep

Thứ tự các component lồng nhau theo mũi tên xuống

::ng-deep

/* Đặt ở bất kỳ component đều có màu đỏ */
/* Toàn bộ thẻ p ở các component có màu đỏ - nó mang tính tổng thể */
::ng-deep p {
    color: red;
} 

Hiển thị:

Start editing to see some magic happen :)

person works!

company works!

address works!

:host ::ng-deep

/* Đặt ở company.component.scss - child(2) */
/* Toàn bộ thẻ p ở company.component và address.component có màu xanh */
:host ::ng-deep p {
    color: blue; 
} 

Hiển thị:

Start editing to see some magic happen :)

person works!

company works!

address works!

:host

/* Đặt ở company.component.scss - child(2) */
/* Thẻ p chỉ có company.component có màu xanh - mang tính chất áp dụng cho chính bản thân company.component */
:host p {
    color: blue; 
} 

Hiển thị:

Start editing to see some magic happen :)

person works!

company works!

address works!

:host-context()

:host-context()

/* Đặt ở themeable-button.component.scss - child */
/* Phụ thuộc component cha sẽ dùng class-theme nào - hiện tại nó đang dùng .red-theme */
:host-context(.blue-theme) .btn-theme {
  background: blue;
}
:host-context(.red-theme) .btn-theme {
  background: red;
}

/deep/ and >>>

Cả hai đều không nên sử dụng :: ng-deep

Tìm hiểu thêm CSS pseudo-class tại here

Hy vọng điều này đã giúp bạn