How to apply styles from parent component to class passed to slot?

Question

css

Let's say there is a component that has a slot.

<template lang="pug">
.my-component
    // some component data
    slot(name="hello")
</template>

<style lang="sass" scoped>
.hello
    // some styles
</style>

And I want the classes described inside this component to be applied to the blocks that are passed through the slot.

<template lang="pug">
.another-component
    MyComponent
        template(#hello)
            .hello Blah blah blah
</template>

In this case, it is clear that Vue defines classes as belonging to different scopes, but removing the scoped property is unwise to achieve my goal. Is there any other way? Other than duplicating the .hello class rules in every component where it will be used.

Answer 1

Everything is in the documentation.