[bug report] the picture preview function is optimized and appendtobody is supported. As a result, the private style v-deep cannot work normally on the image viewer, a large picture preview component of El image

[dfaglory]

Element UI version

2.15.0

OS/Browsers version

windows10

Vue version

2.6.12

Reproduction Link

https://codepen.io/dfaglory/pen/abBrWMa

Steps to reproduce

注意：复现链接：https://codepen.io/dfaglory/pen/abBrWMa 并没有复现bug，因为codepen无法设置vue文件的私有样式<style scoped>，该链接实际上是我希望生成的效果。

在2.15.0版bug修复#20652 #20652
图片预览功能优化，第一条：支持 appendToBody。
优化内容为：的大图预览功能，添加了一个属性appendToBody，该属性向body中添加了this.$el，问题源码位置：https://github.com/ElemeFE/element/blob/master/packages/image/src/image-viewer.vue 310行至312行，问题源码如下：

310    if (this.appendToBody) {
311        document.body.appendChild(this.$el);
312    }

该源码导致.vue文件如果使用私有样式scoped进行深度穿透::v-deep，无法正常生成私有样式。

我想修改大图预览右上角的关闭图标的颜色为红色，例子如下：

<style scoped>
::v-deep .el-icon-close {
  color: red;
}
</style>

该样式不生效

What is Expected?

的大图预览的右上角图标关闭图标变成红色

What is actually happening?

图标样式不生效

[element-bot]

Translation of this issue:

Element UI version

2.15.0

OS/Browsers version

windows10

Vue version

2.6.12

Reproduction Link

https://codepen.io/dfaglory/pen/abBrWMa

Steps to reproduce

Note: recurrence link: https://codepen.io/dfaglory/pen/abBrWMa There is no recurrence bug, because codepen can't set the private style of Vue file < style scoped >, this link is actually the effect I want to generate.
Bug fix in version 2.15.0 #20652

Image preview function optimization, first: support appendtobody.
The optimization content is: the large image preview function of < El Image > adds an attribute appendtobody, which adds this. $el to the body https://github.com/ElemeFE/element/blob/master/packages/image/src/image-viewer.vue The source code of the problem is as follows:

310 if ( this.appendToBody ) {
three hundred and eleven document.body.appendChild (this.$el);

312 }
The source code causes. Vue file to use private style scoped for deep penetration:: v-deep, and cannot generate private style normally.

I want to change the color of the close icon < I class = "El icon close" > < / I > in the upper right corner of the large preview to red, for example:

<style scoped> ::v-deep .el-icon-close { color: red; } </style>

The style does not work

What is Expected?

The close icon in the upper right corner of the large image preview of < El Image > turns red

What is actually happening?

Icon style does not work

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.