来自子组件的 Vue 3 插槽样式

Question

摘要：我需要从子组件设置 <slot> 内容的样式。我正在使用范围 css 并且样式不适用：

我有以下两个组成部分：

<!-- Parent.vue -->
<template>
  <h1>{{ msg }} from Parent</h1>
  <Child>
    <h1>{{ msg }} from Child</h1>
  </Child>
</template>
...
<style scoped>
h1 {
  color: green;
}
</style>

<!-- Child.vue -->
<template>
  <slot></slot>
</template>
...
<style scoped>
h1 {
  color: red;
}
</style>

我希望第二个 <h1> 是红色的，但它是绿色的，因为组件是用类似这样的东西渲染的：

<h1 data-v-452d6c4c data-v-2dcc19c8-s>Hello from Child</h1>

<style>
h1[data-v-452d6c4c] {
  color: green;
}
h1[data-v-2dcc19c8] {
  color: red;
}
</style>

data-v-452d6c4c 来自 Parent，data-v-2dcc19c8-s 来自 Child

如果 <h1> 标记中的第二个属性只是 data-v-2dcc19c8 我想要的样式将被应用，但由于它具有 -s 后缀（插槽？），它没有。

我可能会找到带有 class 之类的其他解决方案，但我很少使用 <slot> 并且我想了解内部工作原理。那 -s 告诉我我正在尝试做的事情可以借助框架来处理，我错过了什么？

工作示例：

https://codesandbox.io/s/condescending-brown-ilfwn

Answer 1

使用 Vue 3 中的新 :slotted selector：

Child.vue

<template>
  <slot></slot>
</template>

<script>
export default {
  name: "Child",
};
</script>

<style scoped>
:slotted(h1) {
  color: red !important;
}
</style>

在 Vue 3 中，子 scoped 样式默认不影响开槽内容。

在这种情况下，!important 修饰符是必需的，因为父级还定义了一个 h1 样式，否则它将优先

来自子组件的 Vue 3 插槽样式

Vue 3 slot styles from child component

css

vue.js

vue-component

vuejs3

vue-slot