Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "host,: host-context and:: ng-deep in JS". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "host,: host-context and:: ng-deep in JS" can help you solve the problem.

: host and:: ng-deep

: host means to select the current component.

:: ng-deep can ignore the nested hierarchy of intermediate className. Go directly to the className you want to modify.

When using some third-party components, modify the style of the components.

Use in this case:

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

However, according to the official document, ng-deep will be abandoned in future versions, and it is unknown what kind of syntax it will become in the future. When using it, remember to prepare for the changes brought about by future Angular upgrades.

: host-context

:: ng-deep you usually need to do this when you haven't written a component and can't access its source code, but: host-context it can be a very useful option when you do.

For example, I have a black title in my design component and I want to be able to change it to white when displayed on a dark theme background.

If I cannot access the source code, I may have to do this in the parent's css:

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

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

H2 {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 anywhere in the component chain, and if found, apply css to H2. Theme-dark. This is a good choice, relying too much on:: ng-deep, and often the necessary anti-pattern.

In this case, it is & replaced with H2 (this is how sass/scss works), so you can define "normal" and theme / alternative css next to each other, which is very convenient.

Special selector for official website data

There are some special selectors in component styles that are introduced from the scope of Shadow DOM styles:

: host

Use the: host pseudo-class selector to select elements in the component host element (relative to the elements within the component template).

Src/app/hero-details.component.css

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

Host selection is the only way to target host elements 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 take the host style as a condition, put the other selectors in parentheses after: host like a function.

The next example targets the host element again, but only if it comes with an active CSS class.

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 may be a CSS class on the element of a document that represents a style theme (theme), based on which you should determine the style of the component.

At this point, you can use: host-context () pseudo-class selector. It is also used in a similar form: host (). It looks for the CSS class in the ancestor node of the current component host element up to 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 elements within the component only if an ancestor element has the CSS class theme-light.

Src/app/hero-details.component.css

: host-context (.theme-light) h3 {background-color: # eef;} has been abandoned / deep/, > > and:: ng-deep

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

Applying the pseudo class:: ng-deep to any CSS rule completely disables the view wrapper for that rule. Any style with:: ng-deep becomes a global style. To limit the specified style to the current component and its subordinate components, be sure to include the: host selector before:: ng-deep. If the:: ng-deep combiner is used outside the: host pseudo class, the style will contaminate other components.

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

Src/app/hero-details.component.css

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

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

/ deep/ and > selectors can only be used in emulated mode. This is the default value and the most frequently used method.

The combiner for "piercing Shadow DOM" in the CSS standard has been deprecated and removed from mainstream browsers and tools. Therefore, we will also remove support for them in Angular (including / deep/, > > and:: ng-deep). At present, it is recommended that you first use:: ng-deep in order to be compatible with future tools.

This is the end of the introduction about "how to use host,: host-context and:: ng-deep in JS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.