css - 来自子组件的 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后缀(插槽？)，它没有。
我可能可以通过类或其他东西找到其他解决方案，但我很少使用 <slot>我想了解内部运作。那个 -s告诉我我正在尝试做的事情可以在框架的帮助下处理，我错过了什么？
一个工作样本:
https://codesandbox.io/s/condescending-brown-ilfwn

Answer 1

使用新::v-slotted Vue 3 中的选择器:
child .vue

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

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

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

在 Vue 3 中， child scoped默认情况下，样式不影响插槽内容。
在这种情况下， !important修饰符是必要的，因为父级也定义了 h1否则优先的样式