Why doesn't styling for slots work in Vue?

Question

Vue.js

The Vue 3 application
has a child component. It has a slot, in this slot I will place several tags in the parent component.
Why doesn't styling work for each of the elements in slot in the child component?

Child component:

<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>