Analysis of Vue, Angular Depth Solar

In Vue development, we often use external component libraries, such as Element. When using a component in the Element component library, we may want to have some customized places, usually use CSS Coverage; sometimes the level is not enough.

Less use / deEP /

CSS use >>>

Angular applicable depth selector

Using component style

For each Angular component you wrote, in addition to defining the HTML template, define the CSS style for the template, specify any selector, rules, and media queries.

One of the implementations is to set the Styles property in the metadata of the component. The Styles property can accept a string array containing CSS code. Usually you only give it a string, just like this:

@component ({selector: ‘app-root’ , TEMPLATE: ` Tour of Heroes
`, Styles: ['h2 {font-weight: Normal;}']}) export class heroappcomponent {/ *.. * /}   

Range Pattern
The style specified in the metadata of @component will only take effect on the template of the component
They are not inherited by components embedded in the template, nor will they be inherited by components that are embedded in the content projection (such as Ng-Content).
In this example, the style of H2 is only effective for HeroAppComponent.Never act on embedded HeromainComponent, which will not act to H2 tags in any other place in the app.

This limitation is the so-called style modular feature

can use the most meaningful CSS class name and selector for each component.

Class name and selector are limited to this component, which does not conflict with class names and selectors in other parts of the app.

The style of the component does not have an unexpected change because of other parts of modification.

You can let each component CSS code and its TypeScript, HTML code, which will contribute to refreshing tidy project structures.

You can modify or remove the CSS code of the component without traversing the entire application. It is not available elsewhere.
  • Special Selector
  • There are some Some of the Shadow DOM style field (CSS Scoping Module recorded in W3C) Special selectors introduced in Level 1:
  • : Host
  • Use: HOST Pseudo-class selector, used to select elements in component host elements (Elements inside the component template).

: Host {Display: Block; Border: 1px Solid Black;}

: Host Selection is the only way to use the host element as the target. In addition, you will have no way to specify it, because the host is not part of the component itself template, but part of the parent component template.
To put the host style as a condition, put other selectors like the function:Host brackets behind.

The next example once again uses the host element, but only when it comes with an Active CSS class at the same time.

 Content_copy: Host (.active) {Border-Width: 3px;}    
: Host-context

Sometimes it is useful based on certain conditions applications from the outside of the component view. For example, there may be a CSS class for representing a style topic (the Meme) on the element of the document, which should determine the style of the component.

You can use the: host-context () pseudo selector. It is also used in the form of host (). It finds the CSS class in the ancestral 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, only the Background-Color style is applied to all H3 elements inside the component when a ancestor element is CSS THEME-LIGHT.

Content_copy: Host-Context (.THEME-Light) H3 {Background-Color: #eef;}
Abandoned / deEP /, >> and: Ng-deEP

Component style usually only acts Component’s own HTML.

Apply Pseudo-Class :: NG-DEEP to how to a CSS rules will completely ban view packages of that rule. Any style with: NG-deEP will become a global style. In order to define the specified style in the current component and its sub-component, make sure to bring the Host selector before :: ng-deep. If :: Ng-Deep Combacter is used outside: Host Pseudo-class, the style will pollute other components.

This example is targeted by all H4 elements, from the host element to the current element to all sub-elements in the DOM:

Content_copy: Host / Deep / H4 {FONT-STYLE: Italic;}
  / DEEP / combiner has two other Name: >>> and :: Ng-deep.  / DEEP / and >> The selector can only be used in the emulated mode. This method is the default value, but also the most used mode. For more information, see Control View Package Mode.  
The combiner used in the CSS standard for “thorns Shadow DOM” has been discarded and this feature is removed from mainstream browsers and tools. Therefore, we will also remove their support (including / deep /, >> and :: ng-deep) in Angular. Currently, it is recommended to use :: NG-Deep for future tools.

The above is the vue, the Angular depth effect selector introduced to everyone, I hope that everyone can help, if you have any questions Leave me a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website! If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment