Vue suitable depth selector
In the development Vue, we often use the external component library element, for example, when using a component element of the component library, we might want to have some custom places, the usual practice is covered with CSS; sometimes insufficient level would open up his path.
Use less / Deep / CSS copy the code used >>>
Angular suitable depth selector
Use of component styles
Angular for each component you write, in addition to custom HTML template, we should also define CSS style template, specify any of the selectors, rules, and media queries.
One way to achieve, is provided in the metadata property styles assembly. acceptable styles attribute contains a string array CSS code. Usually you just give it a string on the line, as in the following example:
<!--src/app/hero-app.component.ts-->@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 {
/* . . . */
}
复制代码
Range of styles
Specified in the metadata @Component only take effect in the style of the template components
They neither inherited template embedded components, the content will not be projected (e.g., ng-content) to a component embedded inheritance.
In this example, h1 style only HeroAppComponent take effect, neither acting on the embedded HeroMainComponent, does not act on the application in any other place of the h1 tag.
This limit is called the scope of the style modular nature
Each component can be used for the most meaningful CSS class names and selectors.
Class name and selection is limited to the component, and it does not apply in other parts of the class name and the selectors conflict.
Style components elsewhere will not be accidentally modified the style changed.
You can make CSS code for each component and its TypeScript, HTML code together, which will lead to fresh and clean project structure.
You can modify or remove components of the future of CSS code, without having to traverse the entire application point of view it is not used elsewhere.
Special selector
There are special style component selected from the shadow (Shadow) DOM art style range (W3C recorded in the CSS Scoping Module Level 1) is introduced:
:host
Use: host pseudo-class selector component for selecting elements in a host element (an element with respect to the interior of the assembly template).
<!--src/app/hero-details.component.css-->:host {
display: block;
border: 1px solid black;
}
复制代码
: Host option is the only way is to host elements of the target. In addition, you can not specify it as part of the host component itself is not a template, but part of the parent component template.
As a condition of the host should style, like a function is necessary to put the other selector: host brackets after.
The next example again host elements as a target, but only if it simultaneously with the active CSS classes to take effect.
<!--src/app/hero-details.component.css-->content_copy
:host(.active) {
border-width: 3px;
}
复制代码
:host-context
Sometimes, based on certain conditions apply styles from an external view of the component is very useful. For example, there may be a topic for presentation style (theme) CSS classes on elements of a document, you decide it should be based on the style components.
Then you can use: host-context () pseudo-class selector. It is also similar: host () form. It looks like CSS ancestor node in the current component of the host element, until the root of the document. When used in combination with other selector, it is very useful.
In the following example, only when an ancestor element has CSS class theme-light, the background-color style will be applied to all h2 elements inside the assembly.
<!--src/app/hero-details.component.css-->content_copy
:host-context(.theme-light) h2 {
background-color: #eef;
}
复制代码
Obsolete / deep /, >>> :: ng-deep, and
Component style usually only acting on the component itself HTML.
The pseudo-class :: ng-deep on how to apply a CSS rule will view a complete ban on the packaging of that rule. Any style will be with :: ng-deep into global style. In order to specify the style defined in the current assembly and the lower assembly, make sure before :: ng-deep band: host selector. If :: ng-deep in combination: use outside the host pseudo-class, the style will contaminate other components.
In this example, all the target elements h3, then all the child elements in the DOM element to the current element from the host:
<!--src/app/hero-details.component.css-->content_copy
:host /deep/ h3 {
font-style: italic;
}
复制代码
/ Deep / combiner and two aliases: >>> and :: ng-deep.
/ Deep / >>> selector and can only be used in the simulation (emulated) mode. This is the default mode, is the most used way. For more information, see the package mode a control view.
CSS standards for "piercing the Shadow DOM" combiner has been abandoned, and this feature is removed from the mainstream browsers and tools. Therefore, we will remove support for them (including / deep /, >>> and :: ng-deep) in the Angular. At present, it is recommended to use a unified :: ng-deep, to be compatible with future tools.