How to style a <slot> from child component Vue.js 3.x

Issue

I am trying to style a p tag that is slotted into a child component using the tag.

Parent Code

<template>
  <BasicButton content="Test 1234" @click="SendMessage('test')" height="10" width="50" />
  <TransparentTopbar />
  <BasicContainer width="90">
    <p class="p-blueish-gray">{{ LorumIpsum() }}</p>
  </BasicContainer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Homepage from "./components/home/Homepage.vue";
import TransparentTopbar from "./components/tools/topbar/TransparentTopbar.vue";
import BasicButton from "./components/tools/button/BasicButton.vue";
import BasicContainer from "./components/tools/container/basic_container/BasicContainer.vue"
//import func from "vue-temp/vue-editor-bridge";

export default defineComponent({
  name: "App",
  components: {
    Homepage,
    TransparentTopbar,
    BasicButton,
    BasicContainer
  },
  methods: {
    SendMessage: sendMessage,
    LorumIpsum: lorumIpsum
  },
});

Child Code

<template>
    <div class="light-rounded-container card-margins" :style="container_style">
        <slot></slot>
    </div>
</template>

<script lang="ts" src="./BasicContainer.ts" />
<style scoped src="./BasicContainer.css" />

import { defineComponent } from 'vue';

export default defineComponent({
    name: 'BasicContainer',
    props: {
        width: {
            type: Number,
            default: 90,
            required: false
        }
    },
    data() {
        return {
            container_style: {
                width: this.width.toString() + '%'
            }
        }
    },
    methods: {}
});

.light-rounded-container {
    background-color: #242629;
    border-radius: 15px;
    align-self: center;
}

::v-slotted(p) {
    color:red !important;
    width: 1% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-top: 25px !important;
    padding-bottom: 15px !important;
}

The BasicContainer component is the one I am trying to style slotted content on. I would like to style the p tag that I pass to this component in the parent, but I would like to style it from within this child component.

Solution

@StevenB. you are corrent. I did not have my style in a separately defined NON-SCOPED .css file. After moving my styling into their and re structuring my HTML to avoid bleeding the css style into other global scope, it worked. Much appreciated.

Answered By - Kallo