Vue项目中scoped属性的作用，及scoped穿透

我们在使用 Vue 的开发新项目的时候，会发现 Vue 给 <style> 标签添加了一个 scoped 属性。

什么是 scoped

scoped 属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

Vue 的转译

Vue 中 scoped 属性的效果主要是通过 PostCss 实现的。

转译前的代码：

<template>
  <h1 class="title">前端资源网</h1>
</template>

<style scoped>
.title{
  font-size: 16px;
  color: #ccc;
}
</style>

转以后的代码：

<h1 data-v-e43c18bc="" class="title">前端资源网</h1>

.title[data-v-e43c18bc] {
  font-size: 16px;
  color: #ccc;
}

PostCSS 给一个组件中所有的 DOM 添加了一个独一无二的动态属性，然后给 CSS 选择器额外添加了一个对应的属性来选择该组件中的 DOM，这种做法使得样式只作用于含有该属性的 DOM ——组件内部 DOM 。

这样如果使用了 Ant Design for Vue 或者 Element UI 等第三方组件，就会出现 CSS 设置不起效的问题，无法通过 CSS 修改组件的样式。可以使用下面的方法来解决：

scoped 穿透：

1、使用 >>> 可以穿透 scoped 属性，修改其他第三方组件的样式。

<style scoped>
  外层 >>> 第三方组件 {
    样式
  }
</style>

2、使用曲线救国的一个方法，用两个 style 标签，一个带 scoped 属性，一个不带 scoped 属性，用来修改第三方组件的样式。

<style>
  /* 全局样式 */
</style>

<style scoped>
  /* 局部样式 */
</style>

3、使用 sass 或 less 的样式穿透 /deep/ 

<style scoped>
/deep/ .title {
  color: #888;
}
</style>

4、还有一种就是不使用 scoped 属性，通过在最外层加 id 或者 class 的形式进行区分。

不论是使用何种方式，都需要与团队的同事沟通好，统一使用哪种方法，保证项目整合的时候不会出现冲突。