父组件scoped会污染同名根节点的子组件

• scoped是实现组件的私有化，不对全局造成样式污染。
• 但是当父组件根元素、子组件根元素名称一致是，仍然会造成污染。
  即：使用 scoped 后，父组件的样式将不会渗透到子组件中。但是一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

实例

父组件

<style lang="less" scoped>
.manage {
  padding: 20px 20px 55px;
  background-color: #f5f5f5;
  ...
  }
</style>

子组件

<style lang="less" scoped>
.manage {
 ...
}
</style>

效果/问题：给父组件添加的padding会一同应用到所有子组件。
查看子组件的样式如下：

（data-v-）即scoped实现原理（参考：Vue scoped原理）：

• 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性。
• 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器的哈希特征值（如[data-v-2311c06a]）来私有化样式。