关于vue+组件库开发中，给style添加scoped后样式添加失效问题

一、介绍

       1.scoped生效的原理

不说基本概念了，网上都有，直接分析为什么使用组件库时dom元素上没有哈希值，而在样式上却有哈希值存在，如下图。

代码中

dom元素上

网页代码上

问题原因：当添加scoped的组件上的直接根元素是组件时，其哈希值将会被添加到该组件的子组件的根元素上，如下图

其中的queryForm组件未在页面展示，影响不大。因此想要修改弹窗的样式firstLevelDialog需要一个根组件将其包裹（目前仅发现该方法），让scoped添加的哈希值在最外层。如div

此时网页上

代码上

display样式生效。