Slots and scoped css

[jurijsk]

I ran into the issue with Vue3 with slots and scoped css. Basically, I want to render some html based on component specific/scoped css.

Lets call the component Styler . This is how I would do that:

//Styler.vue
[...]
<template>
	<article class="main">
		<slot />
	</article>
</template>

<style lang="css" scoped src="../css/styler.css"></style>

This result in all css selectors in styler.css to be propped with v-data-{rand-styler} as expected, e.g. h1[v-data-{rand-styler}] or .article h1[v-data-{rand-styler}] if I nest it.

The problem is that when I use Styler

<Styler>
    <h1>Style me Styler, style me away<h1>
</Styler>

the resulting html will not have h1 propped with v-data-{rand-styler} only article will.

I would expect h1 to have scope attribute, because in rendering in the context of Styler.

How one should work around it? Is it expected behavior and why?

[AnaelBonnafous]

You have to use the :deep() pseudo-class to apply styles to child elements of a component.

/* css/styler.css */
article.main {
  background-color: black;
}

article.main :deep(h1) {
  color: red;
}

You can find the doc about deep selectors for css in vue sfc here : https://vuejs.org/api/sfc-css-features.html#deep-selectors