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 customizations. The usual practice is to use CSS to cover it; sometimes if the level is not enough, it is necessary to find another way.
less use /deep/
css use>>>
Angular depth selector
Using component styles
For each Angular component you write, in addition to defining HTML templates, you also define the CSS styles used for the template, specify arbitrary selectors, rules, and media queries.
One of the implementation methods is to set the styles attribute in the component's metadata. The styles property can accept an array of strings containing CSS code. Usually you just give it a string, as shown in the following example:
<!--src/app/-->
@Component({
selector: 'app-root',
template: `
<h1>Tour of Heroes</h1>
<app-hero-main [hero]="hero"></app-hero-main>
`,
styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}
Randomized styles
The style specified in the @Component metadata will only take effect on the template of the component
They are neither inherited by components embedded in templates nor by components embedded through content projection (such as ng-content).
In this example, the h1 style only works for HeroAppComponent, and will not act on the embedded HeroMainComponent, nor will it act on the h1 tag anywhere else in the application.
This range limitation is the so-called style modularity feature
- You can use the CSS class name and selector that makes the most sense for each component.
- Class names and selectors are limited to this component and do not conflict with class names and selectors elsewhere in the application.
- The style of the component will not be accidentally changed because the style has been modified elsewhere.
- You can put the CSS code of each component together with its TypeScript and HTML code, which will lead to a refreshing and tidy project structure.
- In the future, you can modify or remove the component's CSS code without traversing the entire application to see if it is used elsewhere.
Special selector
There are some special selectors in component styles introduced from Shadow DOM style scope realm (recorded in W3C's CSS Scoping Module Level 1):
:host
Use the :host pseudo-class selector to select elements in the host element of the component (relative to elements inside the component template).
<!--src/app/-->
:host {
display: block;
border: 1px solid black;
}
:host Selection is the only way to target the host element. Apart from that, you will not be able to specify it because the host is not part of the component's own template, but part of the parent component's template.
To use the host style as a condition, you must place other selectors in brackets after :host like a function.
The next example targets the host element again, but it will only take effect if it also has an active CSS class.
<!--src/app/-->
content_copy
:host(.active) {
border-width: 3px;
}
:host-context
Sometimes it is useful to apply styles based on certain conditions from outside the component view. For example, there might be a CSS class on an element of a document that represents a style theme (theme), based on which you should determine the style of the component.
You can use the :host-context() pseudo-class selector at this time. It is also used in a form similar to :host() . It looks for the CSS class in the ancestor node of the current component host element until the root node of the document. It is very useful when combined 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/-->
content_copy
:host-context(.theme-light) h2 {
background-color: #eef;
}
Deprecated /deep/, >>> and ::ng-deep
Component styles usually only act on the component's own HTML.
Applying pseudo-class ::ng-deep to how to apply a CSS rule will completely prohibit view wrapping of that rule. Any style with ::ng-deep will become global. To limit the specified style to the current component and its underlying components, make sure to bring the :host selector before ::ng-deep. If the ::ng-deep combiner is used outside the :host pseudo-class, this style will pollute 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/-->
content_copy
:host /deep/ h3 {
font-style: italic;
}
The /deep/ combiner also has two alias: >>> and ::ng-deep.
/deep/ and >>> selectors can only be used in emulated mode. This method is the default value and is also the most commonly used method. For more information, see the section Control view encapsulation mode.
The combiner used in the CSS standard for "piercing Shadow DOM" has been abandoned 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 to use ::ng-deep first to be compatible with future tools.
Summarize
The above is the vue and angular depth function selector introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!