1.描述
需求是修改el-select中el-option样式，当label长度过长时以省略号显示。
2.思路
通过F12查看DOM树，找到el-option的是.el-select-dropdown__item中的span ，然后为了不污染其他的组件中的样式，利用样式穿透，但结果出乎意料，并没有修改成功。
<el-select v-model="input">
<el-option label="你好呀你好呀你好呀你还好呀" value="1" />
<el-option label="嗨" value="2" />
</el-select>
<style scoped>
>>> .el-select-dropdown__item span {
display: block;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
失败样例
3.失败原因分析
scoped的作用范围是在div#app中的，查看DOM树发现，el-select的容器并不是挂载在#app下面的，自然而然，样式穿透无法生效。
DOM树
4.解决方案
查看Element UI的官方文档，可以发现，el-select为我们提供了一个属性，将该数据设置为false，即可将el-select的父容器移动到#app之下，从而达到一开始的目的。
<el-select v-model="input" :popper-append-to-body="false">
属性解释
成功设置
