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

Editor to share with you how to achieve vue, angular depth selector, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Depth selector for Vue

In the development of Vue, we often use external component libraries, such as element, when using a component in the element component library, we may want to have some customization, usually covered with CSS; sometimes if the level is not enough, we have to find another way.

Less use / deep/css use >

Angular applicable depth selector

Use component Styl

For each Angular component you write, in addition to defining HTML templates, define CSS styles for templates, specify arbitrary selectors, rules, and media queries.

One way to do this is to set the styles property in the metadata of the component. The styles property accepts an array of strings containing CSS code. Usually you can just give it a string, as in the following example:

@ Component ({selector: 'app-root', template: `Tour of Heroes `, styles: [' H2 {font-weight: normal;}']}) export class HeroAppComponent {/ *. . . * /}

A styled style

The style specified in the metadata of @ Component will only take effect on the template of that component

They are not inherited by components embedded in the template, nor by components embedded through content projections such as ng-content.

In this example, the H2 style works only for HeroAppComponent and does not work on embedded HeroMainComponent or H2 tags anywhere else in the application.

This scope limitation is the so-called style modularization 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 each component's CSS code together with its TypeScript and HTML code, which will lead to a clean and tidy project structure.

In the future, you can modify or remove the CSS code of the component without having to traverse the entire application to see if it is used elsewhere.

Special selector

There are some special selectors introduced in the component style from the Shadow DOM style scope area (recorded in W3C CSS Scoping Module Level 1):

: host

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

: 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.

Content_copy: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 H3 elements within the component only if an ancestor element has the CSS class theme-light.

Content_copy:host-context (.theme-light) h3 {background-color: # eef

Obsolete / deep/, > > and:: ng-deep

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

Applying the pseudo class:: ng-deep to a CSS rule completely prohibits the view wrapper of 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 h4 elements, from the host element to the current element to all the child elements in the DOM:

Content_copy:host / 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. For more information, see the Control View Encapsulation Mode section.

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.

The above is all the contents of this article "how to achieve vue, angular depth selector". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.