scoped

作用域

scoped 会在该组件的所有元素和子组件的根元素上添加指纹 id，在满足条件的情况下子组件的根元素也可以受控，方便实现布局等功能

<div class="parent" data-v-xxx>
  <header data-v-xxx></header>

  <!-- 子组件 -->
  <div class="child" data-v-xxx>
    <header></header>
    <div></div>
    <footer></footer>
  </div>

  <footer data-v-xxx></footer>
</div>

<style scoped>
header {
  color: red;
}

.parent footer {
  color: blue;
}

/* 编译结果 */
header[data-v-xxx] {
  color: red;
}

.parent footer[data-v-xxx] {
  color: blue;
}
</style>

样式穿透

:deep() 伪类选择器

<style scoped>
:deep(header) {
  color: red;
}

.parent :deep(footer) {
  color: blue;
}

/* 编译结果 */
[data-v-xxx] header {
  color: red;
}

.parent[data-v-xxx] footer {
  color: blue;
}
</style>