style scoped原理是什么（scoped属性的作用）

1、什么是 scoped

在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。scoped属性的作用就是:加上scoped会使得样式只对当前的组件有用。

如果一个项目中的所有 vue 组件style 标签全部加上了 scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透 scoped 的方式来解决，选择器。

2、scoped 的实现原理：

Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现，如下是转译前的 Vue 代码：

  .scoped {font-size:14px;}

浏览器渲染后的代码：

Vue.js scoped

https://hooper.eu.org/divcss/3620.html