ELEMENT UI如何对下拉框列表的样式进行修改(自定义样式覆盖第三方组件样式)?

目前用了element ui的 el-autocomplete 组件远程检索的下拉框
效果如下:因为对字体的大小和背景颜色不太满意想自己修改一下

查询了官方文档,捣鼓了一下以失败而告终,下面贴代码

                  <el-autocomplete
                    :trigger-on-focus="false"
                    style="width:100%"
                    v-model="form.xxx"
                    :fetch-suggestions="getSmbxMessxage"
                    placeholder="请输入xxx包路径"
                    clearable
                    autocomplete
                    popper-class="my-autocomplete"
                    popper-append-to-body="false"
                  >
                    <template slot-scope="{ item }">
                      <div class="package-path-value">{{ item.value }}</div>
                      <span class="package-path-name">{{ item.name }}</span>
                    </template>
                  </el-autocomplete>

css样式代码如下

<style lang="scss"  scoped >

/deep/.my-autocomplete {
  li {
    line-height: normal;
    padding: 4px;
    background-color: aqua;

    .package-path-value {
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 8px;
    }
    .package-path-name {
      font-size: 10px;
      color: lightcoral;
    }
  }
}
</style>

这时发现 没有任何改变

但是当再写一个style 上面不用scoped关键字修饰就可以

问题又来了,如果不加scoped关键字 就会造成全局样式污染

生与死的两难,请问大佬,我该如何抉择