Vue 3：命名槽的样式

Question

所以我查看了 Whosebug 和 Vue 3 中的文档，但无法完全找到我要找的东西。

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

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

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

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

<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 获取 Eyebrow 组件内的 h6 标签？

Answer 1

The slot content is owned by the parent passing them in.

所以你不需要使用:slotted。您可以简单地使用 :deep selector

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

See it live

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

如果您使用 multi-root 节点组件，父组件的作用域样式和样式子组件将无法正常工作。

因此，如果您使用 mutli-root 节点组件并且 :deep 不起作用，

Vue 3：命名槽的样式

Vue 3: Styling a Named Slot

sass

vue.js

vuejs3

The slot content is owned by the parent passing them in.

See it live