對scoped的理解

css的屬性選擇器

選擇器參考手冊
1.手冊中所述的屬性選擇器說明：

[attribute]	[target]	選擇帶有 target 屬性所有元素。

2.vue組件style標籤中使用scoped之後，生成的HTML結構

我們可以發現組件在使用了scope之後的渲染結果，該組件模板中定義的所有標籤都帶上了data-v-xxxxxxx=""的屬性，但要注意的是，我們的子組件el-dialog內部定義的模板渲染的標籤是不會帶上這個屬性的。

3.vue組件style標籤中使用scoped之後，渲染生成的style標籤內的樣式

<style type="text/css">@charset "UTF-8";
.dialog-select .el-row[data-v-71c0b052] {
  margin-bottom: 20px;
}
.dialog-select .el-row[data-v-71c0b052]:last-child {
    margin-bottom: 0;
}
.dialog-select .el-col[data-v-71c0b052] {
}
.dialog-select .el-col div[data-v-71c0b052] {
    background: #d3dce6;
    min-height: 36px;
    border-radius: 4px;
}
.dialog-select .el-col[data-v-71c0b052]:nth-child(even) {
}
.dialog-select .el-col:nth-child(even) div[data-v-71c0b052] {
      background: #d3dce6;
      min-height: 36px;
      border-radius: 0;
}
</style>

我們可以發現，在使用scoped之後，我們定義的所有類名都會帶上屬性選擇器，而且和HTML結構中的data-xxxxxx屬性一致。

根據屬性選擇器的匹配規則，這樣該樣式就會作用在對應的帶有data-v-xxxx屬性的HTML結構上。

注意的部分:父子組件scoped

1.父組件無scoped，子組件帶有scoped，父組件樣式不帶屬性選擇器，子組件樣式帶有屬性選擇器，無法層疊擴展樣式類。
2.父組件有scoped屬性，子組件無，父組件樣式帶屬性選擇器但子組件渲染生成的HTML結構中不帶data-v-xxxx屬性。
這裏可使用scoped穿透(屬性選擇器前移)解決，參考scoped穿透示例
3.父子組件都有scoped，父組件樣式帶屬性選擇器和子組件渲染生成的HTML結構中的唯一屬性不一致導致匹配失敗。

個人總結，所有組件儘量都使用scoped，但會被複用的組件並且需要保持內部樣式可層疊時不要使用scoped（如第三方框架element-ui等提供的子組件）。