In vue projects, the scope attribute is usually added to the style tag to realize the privatization of the style and avoid global pollution.
But sometimes this attribute will bring trouble: when a third-party component is introduced and its style needs to be modified, it is usually not modified successfully

1, Principle of scope implementing privatization style

By adding a non repeating tag to the DOM element structure and css style to ensure its uniqueness, we can achieve the privatization of the style
1
For example, when the button and dialog components of the third-party plug-in elementui are used, and the scoped attribute is added to the style tag

<template>
  <div class="login-page">
    <h1>{{ msg }}</h1>
    <div>
      <el-button type="success" @click="login">Sign in</el-button>
      <el-button type="success" @click="dialogVisible = true">Spring frame</el-button>
    </div>
    <el-input></el-input>
    <div>
      <el-dialog
        title="Tip 1111"
        :visible.sync="dialogVisible"
      >
        This is a bullet box
      </el-dialog>
    </div>
  </div>
</template>



<style lang="less" scoped>
  @import "../less/login.less";
</style>

login.less file

.login-page{
  h1{
    cursor: pointer;
    background: #f00;
  }
  .el-button{
    width: 200px;
  }
  .el-input{
    width: 100px;
  }
  
  .el-dialog{
    width:200px;
    height: 300px;
    background: #ddd;
  }
}

The DOM display result after the browser runs is:
1. The El button element adds a data attribute, and its css also adds a data attribute selector
2. Only the outermost element of the El dialog component element has the data attribute, which has not existed since the second element, and although it is in login Change its style in the less file, but it has no effect

It can be seen from this:
1. After adding scoped attribute, DOM node adds a non repeated data attribute to indicate its uniqueness
2. After adding the scoped attribute, a data attribute selector is added at the end of the css selector of the DOM node to privatize the style of the element
3. After adding the scoped attribute, the data attribute will be added to the outermost part of the component. If there are other components in the component, other components will not work
2, Solve the problem that introducing third-party components and modifying their styles do not take effect
1. Solution 1: because multiple styles can appear in vue files, you can use two styles, one with scoped attribute and the other without scoped attribute,
And the element styles nested in the third-party components are placed in the style element without scoped, so that the styles in the nested elements in the child third-party components can take effect

<template>
  <div class="login-page">
    <h1>{{ msg }}</h1>
    <div>
      <el-button type="success" @click="login">Sign in</el-button>
      <el-button type="success" @click="dialogVisible = true">Spring frame</el-button>
    </div>
    <el-input></el-input>
    <div>
      <el-dialog
        title="Tip 1111"
        :visible.sync="dialogVisible"
      >
        This is a bullet box
      </el-dialog>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import "../less/login.less";
</style>
<style lang="less">
   .el-dialog{//Place the style of nested elements in the third-party component in the style element without scoped, so that the style in the nested elements in the child third-party component can take effect
      width:200px;
      height: 300px;
      background: #ddd;
    }
</style>

login.less file

.login-page{
  h1{
    cursor: pointer;
    background: #f00;
  }
  .el-button{
    width: 200px;
  }
  .el-input{
    width: 100px;
  }
}

2. Solution 2: use the depth selector: < < or / deep/

To change the style of third-party components through penetration, you need to add deep. If it is stylus, use > > >, and if it is less or sass, use / deep/

<template>
  <div class="login-page">
    <h1>{{ msg }}</h1>
    <div>
      <el-button type="success" @click="login">Sign in</el-button>
      <el-button type="success" @click="dialogVisible = true">Spring frame</el-button>
    </div>
    <el-input></el-input>
    <div>
      <el-dialog
        title="Tip 1111"
        :visible.sync="dialogVisible"
      >
        This is a bullet box
      </el-dialog>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import "../less/login.less";
</style>

login.less file

.login-page{
  h1{
    cursor: pointer;
    background: #f00;
  }
  .el-button{
    width: 200px;
  }
  .el-input{
    width: 100px;
  }
  //To change the style of third-party components through penetration, you need to add deep. If it is stylus, use > > >, and if it is less or sass, use / deep/
  /deep/.el-dialog{
        width:200px;
        height: 300px;
        background: #ddd;
  }
}

The effect of El dialog is the customized style:

Original link: https://blog.csdn.net/qq_37600506/article/details/103084863