scoped样式穿透

在vue组件中，不添加scoped，样式作用于全局，加了scoped样式仅针对当前组件。

如一个简单的样式：

<div>
  <main>
    <span>count: {{ count }}</span>
    <div>这是一段文字</div>
  </main>
  <button @click="increment">增加</button>
  <Hello />
</div>

div main div {
  color: red;
}

添加了scoped

加了scoped之后，实际在浏览器中生成的样式是：

div main div[data-v-7a7a37b1] {
    color: red;
}

并且该组件的元素都会添加一个 data-v-7a7a37b1 属性：

不添加scoped

不加scoped，则样式原样生成，并且组件的所有元素都没有添加 data-v-7a7a37b1。

data-v-7a7a37b1 中 7a7a37b1 是由vue生成的唯一hash值。

使用样式穿透

如果我们在scpoed样式中使用 :deep() ，最终生成的代码会将属性值前移，下面看几个示例。

示例一

div main :deep(div) {
  color: red;
}

最终生成结果：

div main[data-v-7a7a37b1] div {
    color: red;
}

示例二

div :deep(main) div {
  color: red;
}

最终生成结果：

div[data-v-7a7a37b1] main div {
    color: red;
}

示例三

div :deep(main div) {
  color: red;
}

最终生成结果：

div[data-v-7a7a37b1] main div {
    color: red;
}

示例四

:deep(div) main div {
  color: red;
}

最终生成结果：

[data-v-7a7a37b1] div main div {
    color: red;
}

通过上面的示例，再结合浏览器渲染css样式的规律，就能很好的理解最终页面呈现的效果。