Vue 3：设计命名槽的样式

Question

所以我浏览了 stackoverflow 和 Vue 3 中的文档，但找不到我要找的东西。

我正在尝试找到一种方法来定位命名插槽，渗透该插槽内的作用域元素，并覆盖其子样式之一。我假设我需要 ::slotted 选择器和 :deep 选择器来完成此任务。有谁知道该怎么做？

这是我试图解决的情况的示例（LayoutContainer 组件）：

<section>
    <slot name="text"></slot>
    <slot></slot>
    <slot name="sidebar"></slot>
</section>

将进入“文本”槽的组件（Eyebrow 组件）：

<section class="eyebrow-container">
    <h1>{{title}}</h1>
    <h6>{{description"}}</h6>
</section>

页面组件上代码的完整视图：

<LayoutContainer>
    <template #text>
      <Eyebrow :title='test' :description="this is a description"></Eyebrow>
    </template>

    <PageBody></PageBody>

    <template #sidebar>
       <PageSideBar></PageSideBar>
    </template>
</LayoutContainer>

我尝试过的解决方案SCSS 没有成功：

::slotted(h6) { color: red }

::slotted(text){
   :deep(.eyebrow-container) {
      h6 { color: red; }
   }
}

::slotted(text) {
  :deep(h6) { color: red; }
}

还有其他一些我现在已经忘记了。

有谁知道如何从页面组件的 SCSS 获取眉毛组件内的 h6 标签？

Answer 1

槽内容由传入它们的父级拥有。

因此您不需要使用 :slotted。您只需使用 :deep 选择器

<style scoped>
:deep(h6) {
  color: red;
}
</style>

观看直播

---

如果您想知道如何使用 :slotted 那么在您的情况下，它将在 LayoutContainer 组件中使用，尝试设置父组件传入的样式。

---

作用域样式和样式子组件如果您使用多根节点组件，来自父级的组件不会像您想象的那样工作。

因此，如果您使用多根节点组件并且 :deep 不起作用，查看我的其他答案