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

This article focuses on "what is the implementation mechanism of style isolation in angular". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the implementation mechanism of angular style isolation?"

Angular is based on components. We write components one by one, and then combine them into a component tree. However, in the process of development, it is often necessary to override the styles of child components in the parent component. For example, now we have a parent component and a child component, and there is a span,span font in the child component that is red.

As follows:

/ / child.componet.htmlchild span//child.component.scss.child-span {color: red;}

If now, the parent component wants the contents of the span in the child component to turn green. You can use the following ways

/ / parent.component.scssapp-child {:: ng-deep {. Child-span {color: green;}

In the parent component, use the:: ng-deep keyword provided by angular to override the style.

Now let's modify the contents of the child component and add a layer of div to the span. After all, there will certainly be more than one layer of components in reality.

/ / child.componet.html child span//child.component.scss.child-div {. Child-span {color: red;}}

At this point, we will find that the content of the span in the child component has changed back to red, and the previous override by the parent component did not take effect.

:: why does ng-deep fail? Or, when will:: ng-deep be valid? When will it expire? Furthermore, how is style isolation between components and components in angular achieved?

Css selector

Element selector, id selector, class selector and attribute selector are provided in css.

For the problem of style isolation in angular, the more important thing is the property selector. In the attribute selector, you can accurately select an element by adding any attribute to it. Like,

A [target] {background-color:yellow;}

With the selector above, we can select all an elements with the target attribute.

The other is the descendant selector.

In css, the descendant selector selects all descendant elements of the specified element. such as,

[attr] span {color: green;}

This selector first selects the element with the attr attribute, and then selects all descendant span elements of that element.

With the css property selector and descendant selector, you have all the tools you need to complete component style isolation. The style isolation of components in angular and:: ng-deep are based entirely on these two contents.

Angular style isolation implementation mechanism

Let's now go back to the previous angular component, the content of the child component is

/ / child.componet.htmlchild span//child.component.scss.child-span {color: red;}

The content of the parent component is

/ / parent.component.html

After the above two components are processed by angular, the generated html content is as follows

As you can see, the parent component has two attributes: _ ngcontent-mye-c13 and _ nghost-mye-c12, while the child component has two attributes: _ ngcontent-mye-c12 and _ nghost-mye-c11. The span tag under the child component adds the attribute _ nghost-mye-c11.

For scss files, after angular processing, the. child-span class in the child component becomes .child-span [_ nghost-mye-c11].

From this we can see that the style isolation of angular is accomplished by using the property selector.

The attribute _ nghost-mye-c11 appears only in the child component. The .child-span class in child.component.scss becomes .child-span [_ nghost-mye-c11], and according to the mechanism of the property selector mentioned earlier, .child-span only works on the content of the child component.

If you also write a .child-span class selector inside the parent component, the generated class selector will be .child-span [_ nghost-mye-c12]. The _ nghost-mye-c12 attribute belongs to the parent component, so the .child-span class will only take effect on the contents of the parent component. The child components are not affected, and style isolation is complete.

:: ng-deep

So why can you overwrite the contents of the child component in the parent component through:: ng-deep?

/ / parent.component.scssapp-child {:: ng-deep {. Child-span {color: green;}

After the above content is processed by angular, the resulting content is app-child [_ nghost-mye-c12] .child _ span. The class after:: ng-deep removes the automatically added attributes, according to the css's descendant selector mechanism. App-child [_ nghost-mye-c12] .child _ span selects all tags with the .child _ span class under the child component, and according to the priority, app-child [_ nghost-mye-c12] .child _ span is higher than the .child [_ nghost-mye-c11] generated by the child component, so the style in the child component is overwritten.

So why sometimes:: ng-deep can't be overwritten? For example, when the child component code is as follows

/ / child.componet.html child span//child.component.scss.child-div {. Child-span {color: red;}}

At this point, even if we find that the color of span in the child component is still red.

In fact, the reason is not complicated, after examining the style file generated by angular, we can find that the reason why it is not overwritten is purely because of the priority of the css selector. The style .child-div [_ nghost-mye-c11] .child-span [_ nghost-mye-c11] generated by the child component takes precedence over the style app-child [_ nghost-mye-c12] .child generated by the parent component. So, what we see is the effect in the parent component:: ng-deep does not take effect, and a faster way is to add! important directly to the style of the parent component. But because! the weight of important is too high, it is not recommended. Before discovering the reason for the failure of angular:: ng-deep, it is a pity that this method was used in many places before the project.

Another way is to increase the priority of the styles generated by the parent component, since the priority is not enough. Modify the code for the parent component to

: host {app-child {:: ng-deep {. Child-div {. Child-span {color: green;}

At this point, the style [_ nghost-mye-c12] app-child [_ nghost-mye-c12]. Child-div. Child-span generated by the parent component takes precedence over the style generated by the child component. Child-div [_ nghost-mye-c11] .child-span [_ nghost-mye-c11], the color of the span in the child component turns green.

Here we use the: host keyword, and then let's briefly see what it does.

: host

In the previous summary, the style generated by the parent component is [_ nghost-mye-c12] app-child [_ nghost-mye-c12] .child-div. Child-span. If you remove: host, you will find that the generated style becomes app-child [_ nghost-mye-c12]. Child-div .child-span. So: the host keyword just adds the parent component property field to the generated style.

So this: what's the use of host?

There are two common functions.

One is to select the current component tag. In angular, our custom components, such as parent component app-parent and child component app-child, will eventually be rendered to the generated html document. If you need to check these tags, you can use the: host keyword.

Another function is to isolate the style, writing the class class inside: host, which can never be leaked globally anyway. In fact, through the previous content analysis, it can be found that if it is not written in: host, it will not be leaked to the overall situation. But if the following happens

/ / some.component.scss::ng-deep {. Random-class {xxxx}}

After being processed by angular, this class will eventually become

. random-class {xxxx}

Random-class will have an impact on the overall situation.

But if you wrap it inside: host, even if you use the:: ng-deep keyword, it will only affect the descendant elements of this component at most. So there is the following paragraph in the official angular documentation.

Applying the:: ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with:: ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the: host selector before:: ng-deep. If the:: ng-deep combinator is used without the: host pseudo-class selector, the style can bleed into other components.

At this point, I believe you have a deeper understanding of "what is the implementation mechanism of style isolation in angular". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.