In vue development, after the parent component adds scoped. Solve the problem that the style of the child component cannot be modified in the parent component.

In the development of vue, we need to refer to subcomponents, including ui components (element, iview). But after adding scoped to the parent component, writing the style of the child component in the parent component has no effect. After removing scoped, styles can be overridden. But this will pollute the global style. In order to solve this problem, vue-loader adds a new writing method.

#demo

Parent component:

<style lang="css" scoped>

  header /deep/ .header{
      box-shadow:0px 1px 0px 0px $white;
  }

header >>> .header{
      box-shadow:0px 1px 0px 0px $white;
}

</style>

Subassembly:

<template>
   <header>
       <div class="header">       </div>   </header>
</template>

This way of writing and modifying the style of the subcomponent will not pollute the global style!

Official website documentation: Scoped CSS vue-loader

Tips: This method is supported since vue-loader 11.2.0

In developing with vue, we sometimes refer to external components, including UI components (ElementUI, iview).

When a  <style> tag has an  scoped attribute, its CSS applies only to the element in the current component. 
But after adding  it in the scoped parent component, the style of the parent component will not penetrate into the child component, so writing the style of the child component in the parent component has no effect.

1. Remove scoped

After the parent component  <style> is removed  scoped , the parent component can write the child component's style, but you will worry about polluting the global style. 
[Because we know that the correct way to use global styles is to use a global app.css]

2. Mixing local and global styles

You can use both scoped and unscoped styles in one component:

<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>

• 
  

We write the styles that need to be modified for the subcomponents in the global style above.

3. Use the Depth Action Selector

If you want  scoped a selector in a style to go "deeper", such as affecting child components, you can use  >>>   /deep/ the operator:

<style scoped>
.a >>> .b {
  /* ... */
}.a  /deep/  .b {  /* ... */}
</style>

• 
  

Some preprocessors like SASS do not parse correctly  >>>. In this case you can  /deep/ replace it with an operator - this is an  >>> alias for one that will work just as well.

---

OK, the main content is the above points.

Additional things to add are: 
1. DOM content created by v-html is not affected by in-scope styles, but you can still style them with deep-scoped selectors 
2. CSS scope cannot replace class 
3. In recursion Be careful with descendant selectors in components