Issue with Scoped Styling and Child Component: I am facing a problem while trying to style the contents of a <slot> within a child component using scoped css. Despite applying styles, they do not reflect as expected.
The scenario involves two components:
<!-- Parent.vue -->
<template>
<h1>{{ msg }} from Parent</h1>
<Child>
<h1>{{ msg }} from Child</h1>
</Child>
</template>
...
<style scoped>
h1 {
color: green;
}
</style>
<!-- Child.vue -->
<template>
<slot></slot>
</template>
...
<style scoped>
h1 {
color: red;
}
</style>
Although I intend for the second <h1> tag to appear red, it ends up being green due to the rendered component having attributes such as:
<h1 data-v-452d6c4c data-v-2dcc19c8-s>Hello from Child</h1>
<style>
h1[data-v-452d6c4c] {
color: green;
}
h1[data-v-2dcc19c8] {
color: red;
}
</style>
The suffix "-s" in the attribute data-v-2dcc19c8-s seems to be causing this issue.
This leads me to explore other solutions, possibly involving classes or alternative approaches. However, my limited experience with <slot> has sparked curiosity in understanding these intricacies better. The presence of the "-s" hints at a framework-related aspect that I may have overlooked. Can anyone provide insights on this?
For reference, here's a sample demonstrating the issue: