In AngularJS: host,:host-context,::ng-deep details

:host and ::ng-deep

:host means selecting the current component.

:: ng-deep ignores the nested hierarchy of the middle className. Find the className you want to modify directly.

When you use some third-party components, modify the style of the components.
Use in this case:

:host ::ng-deep .className{
    新的样式......
}

:host {
     background: #F1F1F1;
     overflow: hidden;
     padding: 24px;
     display: block;
}
 
.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

But the official document says ng-deep will be abandoned in a future release and doesn't know what grammar it will become in the future. When you use it, remember to prepare for the changes that will come with future Angular upgrades.

:host-context

::ng-deep This is usually required when you are not writing a component and cannot access its source code, but host-context can be a very useful option when you do.

For example, I < h1> I have a black title in the component I designed and I want to be able to change it to white when displayed on a dark theme background.

If I can't access the source code, I might have to do this in my parent's css:

.theme-dark widget-box ::ng-deep h1 { color: white; }

Instead, :host-context you can do this within the component. SCSS code

h1 
 {
     color: black;       // default color
     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }
     // OR set an attribute 'outside' with [attr.theme]="'dark'"
     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

This will look at any location in the component chain, and if found, apply css to h1. This is a good choice to rely too much on ::ng-deep and often necessary anti-patterns.

In this case, it is replaced with h1 (which is how sass/scss work), so it is convenient that you can define "normal" and topic/alternative css next to the definition.

Official website information

Special selectors

There are some special selectors introduced from the shadow DOM style range domain in component styles:

:host

Use : host pseudoclass selector to select elements in the component host element relative to the element inside the component template.

src/app/hero-details.component.css

:host {
  display: block;
  border: 1px solid black;
}

The host selection is the only way to target the host element. Other than that, you won't be able to specify it because the host is not part of the component's own template, but part of the parent component template.

To condition the host style, place the other selectors like functions in parentheses after host.

The next example targets the host element again, but only if it has an active CSS class at the same time.

src/app/hero-details.component.css

:host(.active) {
  border-width: 3px;
}

:host-context

Sometimes it is useful to apply styles based on certain conditions that come from outside the component view. For example, there might be a CSS class on the < body > element of a document that you should use to style a component based on it.

You can then use the :host-context() pseudoclass selector. I t is also used in a form similar to : host(). I t looks for the CSS class in the ancestor node of the current component host element until the root node of the document. It is useful when used in combination with other selectors.

In the following example, the background-color style is applied to all < h2 > elements inside the component only if an ancestor element has a CSS class theme-light.

src/app/hero-details.component.css

:host-context(.theme-light) h2 {
  background-color: #eef;
}

Discarded /deep/, >>>, and ::ng-deep

Component styles typically only work on the HTML of the component itself.

Applying pseudoclass::ng-deep to any CSS rule completely prohibits view wrapping of that rule. A ny style with ::ng-deep becomes a global style. I n order to limit the specified style to the current component and its child components, be sure to bring the :host selector before ::ng-deep. If the ::ng-deep combiner is used outside the :host pseudoclass, the style contaminates other components.

This example targets all < h3 > elements, from the host element to the current element to all child elements in the DOM:

src/app/hero-details.component.css

:host ::ng-deep h3 {
  font-style: italic;
}

The /deep/combination also has two aliases: >>> and ::ng-deep.

The /deep/ and >>> selectors can only be used in emulated mode. T his is the default and the most used way.

The combiner used in the CSS standard to "pierce Shadow DOM" has been abandoned and removed from mainstream browsers and tools. T herefore, we will also remove support for them (including /deep/, >>>, and ::ng-deep) from Angular. Currently, it is recommended to use ::ng-deep uniformly first in order to be compatible with future tools.

Recommended lessons: Little White Front End: Angular Getting Started, Angular Tutorials