Vue 3: Styling a Named Slot-CodePudding

So I've looked through stackoverflow and the documentation in Vue 3 but can't quite find what I'm looking for.

I'm trying to find a way to target a named slot, penetrate the scoped element within that slot, and override one of its children's styles. I assume I need the ::slotted selector and the :deep selector for this mission. Does anyone know how to do this?

Here is an example of the situation I am trying to solve for (LayoutContainer Component):

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

the component that will go into the "text" slot (Eyebrow Component):

<section >
    <h1>{{title}}</h1>
    <h6>{{description"}}</h6>
</section>

a completed view of the code on a page component:

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

    <PageBody></PageBody>

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

Solutions I have tried in SCSS with no success:

::slotted(h6) { color: red }

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

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

and a few others I have forgotten at this point.

Does anyone have any ideas on how to get to the h6 tag inside of the Eyebrow Component from the Page Component's SCSS?

CodePudding user response：

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

So you don't need to use :slotted. You can simply use the :deep selector

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

See it live

If you are wondering how to use :slotted then in your case it would be used in LayoutContainer component trying to style what the parent component passes in.

Scoped styling and styling child components from a parent don't work as you might think if you use multi-root node components.

So if you use mutli-root node component and :deep doesn't work, See my other answer