Vue 组件间的样式冲突污染解决方案
一、污染是如何产生的？
在 Vue 中，我们可以使用类似于 Web Component 的组件化写法，即使用 `<template>`、`<style>` 和 `<script>` 分别定义组件的模板、样式和逻辑。但是，在这个过程中，样式的污染问题就出现了。由于浏览器的限制，所有的样式类都会通过 `<style>` 标签插入头部，从而影响全局，交叉污染其他组件的样式。
二、增加 Scoped 标识
为了解决样式污染问题，Vue-loader 提供了一个解决方案，即为组件中的 `<style>` 标签增加一个 `scoped` 标识。在编译的过程中，Vue-loader 会为组件每一个元素节点增加一个 `scopeId` 属性，同时为所有的样式类加上该属性，从而达到样式隔离的效果。
例如：
```html
<template>
<div class="bg"></div>
</template>
<style scoped>
.bg {
background-color: #000;
width: 100px;
height: 100px;
}
</style>
```
在上面的例子中，`.bg` 样式类将被加上当前组件的 `scopeId` 属性，从而隔离其他组件的样式。
三、ScopeId 的继承
但是，Scoped 标识也存在一些问题。例如，在父子组件的情况下，子组件的根元素会继承父元素的 ScopeId 属性，从而导致样式污染。例如：
```html
// 父组件
<template>
<div>
<div class="bg"></div>
<Sub></Sub>
</div>
</template>
<style scoped>
.bg {
background-color: #000;
width: 100px;
height: 100px;
}
</style>
// 子组件
<template>
<div class="bg"></div>
</template>
<style scoped>
.bg {
width: 300px;
height: 300px;
margin-top: 5px;
}
</style>
```
在上面的例子中，子组件的 `.bg` 样式类将继承父组件的 ScopeId 属性，从而导致样式污染。
四、怎么破？
解决这个问题的方法很简单，为每一个组件的根元素提供一个唯一的样式名（如果有的话）。例如，不要每个组件都命名为 `wrap`，而是根据业务命名为 `b1-wrap`、`b2-wrap` 等。这样，非根元素的类名不管怎么命名，怎么重名，都不会发生污染。
五、这是 Vue-loader 的一个 bug
Scoped 标识可以解决大多数的样式污染问题，但是它并不是完美的。如果是我，我会在编译的时候不是增加属性，而是直接根据 `scopeId` 修改类名。
