在项目中遇到一个觉得比较有意思的坑，在vue框架中使用element，遇到动态添加dom元素的组件时（tooltip, dialog等）,在属性popper-class，自定义class时样式不生效，后面经过分析不生效的原因是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识（例如data-v-fae5bece），class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在scoped中，element动态添加的dom上不具备唯一标识data-v-fae5bece，所以样式不会生效只能用全局样式覆盖，原因分析完了，下面就说说怎么解决问题吧
前提是style使用的scoped,个人觉得class命名项目大了多人参与class标准很难界定，所以推荐使用scoped,后面整理出来三种方法，话不多说上重点，下面以tooltip为例

1，在assets添加全局样式，提前设定固定class使用@import引入添加样式

.el-tooltip__popper {
  &.tooltip-width {
    max-width: 300px;
  }
}

优点全局样式不局限当前组卷覆盖样式就不受scoped影响（有ui规范可以使用）
缺点就不灵活，想设置不同样式要在全局样式添加不同的class

2，第二种就是网上常见的在当前组件定义两个style，一个是加scoped，一个不加样式作用于全局

<style lang="less" scoped>
.text {
  color: red;
}
</style>
<style lang="less">
.tooltip-width {
  max-width: 100px;
}
</style>

这样可以解决问题但是很不推荐使用，全局样式很容易污染全局样式，一旦有人命名class相同样式就会受影响，还很难排查，不推荐

3，第三种方法是自己想到比较骚的方法

此方法的重点就是使用slot,只要有插槽万物皆可插

<el-tooltip
   popper-class="tooltip-width"
   placement="top">
   <span slot="content" class="tooltip-text">asdfasdfasdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
     <span class="text">tooltip</span>
</el-tooltip>

<style lang="less" scoped>
.tooltip-text {
  max-width: 100px;
  display: inline-block;
}
</style>

这样就可以在当前组件使用自己想定义的样式而不会影响全局，是不是很方便！！！