Почему не работает стилизация для слотов во Vue?

Question

[postya]

Приложение на Vue 3
имеется дочерний компонент. В нем есть slot, в этот слот я буду размещать несколько тегов в родительском компоненте.
Почему не работает стилизация для каждого из элементов в slot в дочернем компоненте?

Дочерний компонент:

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

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

<style scoped>
.snippet-item p {
  color: red;
}
</style>

Главный компонент:
<code>
 <SnippetItem>
          <div class="snippet-item">
            <h3>Title</h3>
            <p>Description</p>
            <div class="tags">
              <span>Frontend</span>
            </div>
          </div>
        </SnippetItem>
</code>

Comments

[Михаил]

стили не распространяются на слоты

[postya]

Михаил, то есть, если мне нужно стилизовать компонент,в котором есть slot, то я должен это делать в родителе?

[Вадим]

postya, Вам нужно делать так, как вам нужно. Всё зависит от необходимой композиции.
У вас может быть так, как Вы написали, и тогда .snippet-item нужно стилизовать в родителе.
Но это как-то не очень логично.
А может быть так:

<template>
  <div class="snippet-item">
    <slot></slot>
  </div>
</template>

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

<style scoped>
.snippet-item p {
  color: red;
}
</style>

Может быть потребуется ::v-deep

[postya]

Вадим, c v::deep сработало, благодарю! Разместите свой ответный комментарий как ответ пожалуйста

<template>
  <div class="snippet-item">
    <slot></slot>
  </div>
</template>

.snippet-item::v-deep p {
  color: red;
}

.snippet-item::v-deep span {
  background-color: $green;
}

Главный комопнент:

<SnippetItem>
          <h3>Title</h3>
          <p>Description</p>
          <div class="tags">
            <span>Frontend</span>
          </div>
        </SnippetItem>