Today, I saw my friend working on Vue project, and saw that he used /deep/ to modify the style of third-party components. My first impression was that it was similar to :global, which can avoid the hash of selectors, but in fact it is not. Next, I’ll go into more detail about what you can do with these two keywords.

First, I created an app.vue single-file component using the Ant-design-vue Slider component.

<template>
  <div id="app"> 
    <span>123</span>
    <div id="parent">
      <span>234</span>
      <a-slider id="test" :default-value="30" :disabled="disabled" />
    </div>
  </div>
</template>

<script>

import Vue from 'vue';
import 'ant-design-vue/dist/antd.css';
import { Slider } from 'ant-design-vue';
Vue.component(Slider.name, Slider);

export default {
  name: 'App',
  data() {

    return {
      disabled: true
    }
  }
}
</script>

<style lang="less" scoped>
#app {
  & > span {
    color: red;
  }
  
  #parent {
    & > span {
      color: green;
    }
  }
}
</style>
Copy the code

The effect of app.vue is as follows:

Take a look at what the RENDERED DOM and compiled CSS look like. First of all, it can be found that the RENDERED DOM has the data-v-xxxx attribute added to the HTML tags under the template, while only the root node of the third-party component has the data-v-xxx attribute added. Second, you can see that the data-V-xxx attribute is added to the CSS when it is compiled to the final selector.

If we want to change the style of the Slider, there are two cases, one for the root node and one for the non-root node.

  1. The root node

The height of the ant-slider is 12px, and if you need to change the height to 20px, you can just write the selector in style.

<style lang="less" scoped>
#app {

  & > span {
    color: red;
  }
  
  #parent {
    .ant-slider {
       height: 20px;
    }
    & > span {
      color: green;
    }
  }
}

</style>
Copy the code

  1. The root node

If you want to change the background-color of ant slider-rail to #f5f5f5, you may want to change the background-color of ant slider-rail to #f5f5f5.

<style lang="less" scoped>
#app {

  & > span {
    color: red;
  }

  #parent {
    & > span {
      color: green;
    }

    .ant-slider-rail {
      background-color: yellow;
    }
  }
}
</style>
Copy the code

In fact, this doesn’t work, the background color of.ant-slider-rail remains unchanged.

If we look at the result of compiling less into CSS, we can see that the. Ant-slider-rail selector is followed by a data-v-xxx property selector. Ant -slider-rail does not have this property, so the style will not work.

To solve this problem, /deep/, commonly known as style penetration, was introduced and used as follows.

<style lang="less" scoped>

#app {

  & > span {
    color: red;
  }
  
  #parent {
  
    & /deep/ .ant-slider-rail {
      background-color: red;
    }

    & > span {
      color: green;
    }
  }
}
</style>
Copy the code

/deep/ does not add the data-v-xxx attribute after ant slider-rail, but adds the data-v-xxx attribute after #parent. The ant-slider-rail element is hit, and the background color is changed to red.

Finally, I’ll try “global” to see if it works.

<style lang="less" scoped>

#app {

  & > span {
    color: red;
  }

  #parent {

    :global .ant-slider-rail {
      background-color: yellow;
    }
    
    & > span {
      color: green;
    }
  }
}
</style>
Copy the code

The background color of the progress bar did not change to green. Unfortunately, :global failed. Look at the compiled CSS results and you can see why. :global is not properly parsed and appears in the compiled result.

A common mistake is to define the same class name for the root node in a custom component, such as container. However, even though the child is styled correctly, you can see that the child applies the same style as the parent, but is overridden by defining the same style in the child. This is also caused by scoped above, so it is not recommended that you define the same class name for the root node in the component.