插槽slot涉及到的样式污染问题

1. 前言

本次我们主要结合一些案例研究一下vue的插槽中样式污染问题。在这篇文章中，我们主要关注以下两点:

• 父组件的样式是否会影响子组件的样式？
• 子组件的样式是否会影响父组件定义的插槽部分的样式？

2. 准备代码

2.1 父组件代码

<template>
  <div class="wrap">
    <div>
        parent-root
    </div>
    <A>
        <div slot-parent>
            <div class="container">parent_content</div>
        </div>
    </A>
  </div>
</template>
<script lang=ts setup>
import A from './A.vue';
</script>
<style lang=scss scoped>
.wrap{
    width: 400px;
    height: 400px;
    background-color: lightgreen;
    color: red;
}
.container{
    background-color: lightcoral;
}
</style>

2.2 子组件代码

<template>
  <div class="wrap" child>
    <div>
        child-header
    </div>
    <slot></slot>
    <div class="container">
        child-footer
    </div>
  </div>
</template>
<script lang=ts setup>
</script>
<style lang=scss scoped>
.container{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.wrap{
    border: 1px solid black;
}
</style>

2.3 最终编译的代码

通过上面的代码，我们得出几个结论：

• 子组件的顶级标签会继承父组件的文件指纹。
• 子组件的插槽(父级定义的插槽代码)的顶级标签不会继承子组件的文件指纹。

3. 问题分析

3.1 父组件是否污染子组件问题

通过上面的分析，我们知道父组件的文件指纹会继承到子组件的顶级标签上，也就是说父组件的样式有可能会影响子组件的样式。
比如，我们在父组件中定义了wrap的样式：

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightgreen;
    color: red;
}

那么他生成的代码如下：


此时，我们发现在父组件定义的wrap样式在子组件的顶级标签仍然起作用。此时，就会污染子组件。

目前我还没有比较好的解决方案，只能在实际开发中对于类名的命名尽量避免相同。

3.2 子组件是否会污染插槽中的样式

通过上面的分析，我们知道插槽中的html片段并不会携带子组件的文件指纹。由于在子组件定义的样式都会携带子组件的文件指纹，所以子组件定义的样式并不会影响插槽中html片段的样式。
当然，这个假定也都是在不使用v-deep的前提下生效。如果掺杂v-deep呢？

3.3 v-deep下子组件插槽样式的污染情况

父组件代码

<template>
  <div class="wrap">
    <div>
        parent-root
    </div>
    <A>
        <div slot-parent>
            <div class="container">parent_content</div>
        </div>
    </A>
  </div>
</template>
<script lang=ts setup>
import A from './A.vue';
</script>
<style lang=scss scoped>
.wrap{
    width: 400px;
    height: 400px;
    background-color: lightgreen;
    color: red;
}
.container{
    background-color: lightcoral;
}
</style>

子组件代码

<template>
  <div class="wrap" child>
    <div>
        child-header
    </div>
    <slot></slot>
    <div class="container">
        child-footer
    </div>
  </div>
</template>
<script lang=ts setup>
</script>
<style lang=scss scoped>
.container{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.wrap{
    border: 1px solid black;
    ::v-deep .container{
        border: 5px dashed lightsalmon;
    }
}
</style>

通过上面分析的代码，我们发现parent_content所在的标签和child-footer所在的标签都生效了，也就是说子组件的样式污染了父组件的标签。
这一点在开发中要注意，要慎重使用v-deep，不然会产生难以预料的结果。这里有可能有人会想，在最后加一个v-deep就行了呗。
而实际事与愿违，因为对于多个v-deep，vue只能识别出第一个，后面的会按照样式名为v-deep进行渲染。

.wrap{
    border: 1px solid black;
    ::v-deep .container::v-deep{
        border: 5px dashed lightsalmon;
    }
}