/deep/ depth selector

Such as you use the components or develop a component for themselves and others sometimes you change a place is likely to affect the other, or you don’t need to others at this time of the component, oneself to encapsulate a, but most of the time is not too realistic, so you need to have a method or way, does not affect the other place, and can modify the child components in the current style. For example, when using the UI component library, if you want to change a small part of it, but you can’t find the corresponding class in the code, you need to look for the corresponding class in the browser’s Element tree and add /deep/ to change it.

Class <style scoped> /deep/.title{
        color: #ff0;
    }
</style>
Copy the code

style scoped

In a VUE component, to keep the style private (modular) and not globally polluting, you can add the scoped attribute to the style tag to indicate that it belongs only to the current module.

Scoped to realize the principle of privatization

By observing DOM structure, it can be found that: Vue privatized the style by adding unique tags to the DOM structure and CSS styles to ensure that they are unique. As shown in figure 2, this character is also added to style attributes to ensure that all tags in scoped components will have a data-V-8DC7CCE2 attribute. And you can see that in the CSS styles section.

Scoped is implemented with the help of PostCSS

The component with the scoped attribute does the following to prevent global contamination:

  • Add a non-repeating attribute data-V-8DC7CCE2 to the HTML DOM node to indicate uniqueness
  • Add a field after each style selector of the component to which the scoped attribute is added, which is equivalent to the non-duplicate attribute, to achieve scope-like effects without affecting the whole world
  • If there are other components inside the component, only the tags in the outermost component will be assigned a unique attribute field, and the components referenced inside the component will not be affected.

The disadvantages of scoped

We all know that CSS styles have a priority. Scoped, while modularizing component styles, has the effect of placing more weight on each style: in theory, we would need to modify the style to cover it with more weight. This is one of the dimensions that adds complexity.

  • The parent component has no scoped property and the child component has scoped. The parent component cannot manipulate the style of the child component (for reasons we can see in principle). Although we can set the style globally through the label selector of this class of tags, other components will be affected
  • The parent component has the scoped property and the child component has none. The parent component cannot style the child component because all tags of the parent component carry the data-V-469AF010 unique flag, but the child component does not carry this unique flag. As with 1, although we can style the child component globally through the tag selector of this class, But it will affect other components
  • Both parent and child components are available, and similarly, styles cannot be set to increase the amount of code to change