How to Style Slot Elements in Vue 3 Using Slotted Selectors

You can add styles to any upcoming HTML elements in the <slot> using Vue 3 slotted selectors. In this way, we can write CSS styles in one place and reuse them throughout our application.

Vue 3 provides the :slotted() pseudo-class to target any HTML tags, id, or class that the slot will receive from another component and add styles to those elements. Whenever it receives those elements, it will apply the styles automatically.

You can also apply the global CSS style in Vue 3 if you prefer. But if you want to write scoped CSS for the slot elements, you have to use this pseudo-class.

You will find this guide helpful in learning how to style slot elements in Vue 3 step by step. This technique is also applicable to named slots. We will start from the beginning like what is it and how it works. Then I will show you an example.

What are Slotted Selectors in Vue 3?

Slotted selectors are a type of CSS selector that allows you to target elements that are passed to a slot and add CSS styles in Vue 3 SFC components. You can target any HTML element, id, or class selector using the :slotted() pseudo-class.

To understand how this pseudo-class works, let's see an example:

          <style scoped>
.container :slotted(h2) {
    font-size: 35px;
    color: #054ba0;
}
</style>
        

Suppose you will pass a <h2> element to a <slot> and you want to add a default style to it. If you select that heading tag directly and add style in the scoped <style> section, it will not have any effect.

Vue considers the elements that you pass to the slot are owned by that component. This component has no control over them. That's why we need to use the :slotted() pseudo-class in order to select any upcoming elements.

Here I am targeting any <h2> tag that is present inside the .container class and adding CSS properties. Now, whenever you pass <h2> elements, these styles will work on them. You don't have to write styles for it in any other components.

Also Read: How to Pass Data From Child to Parent in Vue 3 (Composition API)

Add CSS Styles to Slot Elements in Vue 3

You have to add the CSS styles in the component where you use the <slot> element. So, create a Vue 3 component in your project with it.

I have a BaseLayout.vue component, where I will receive content from other components using <slot> and render them on the screen. Here I want to target the title class.

          <template>
    <section>
        <header>Header Section</header>

        <main class="container">
            <slot></slot>
        </main>

        <footer>Footer Section</footer>
    </section>
</template>

<style scoped>
.container :slotted(.title) {
    font-size: 35px;
    color: #054ba0;
}
</style>
        

In this example, I am using the <slot> element in this component where I can pass and render any content from another component.

Here I expect an element with a class title and add some style to it. As you know, we can't directly select that element here. Because it is coming from another component.

The BaseLayout.vue component doesn't have control over that element. Therefore, you need to use the :slotted() inside <style scoped> section to select that class.

That's why I am targeting .title that is present inside the container class and adding some CSS properties to it. Now whenever you will pass an element with this title class, these styles will be applied to it automatically.

          <template>
    <div>
        <base-layout>
            <div>
                <h2 class="title">Page title</h2>
            </div>
        </base-layout>
    </div>
</template>

<script setup>
import BaseLayout from './components/BaseLayout.vue'
</script>
        

Here I am using the BaseLayout component and passing a <h2> tag with the title class. It will have those styles applied even if there is no style for it in this component.

It is very useful when you want to add a unique look to an element without writing CSS properties again and again. You can select that element and add the styles to make your CSS code reusable.

Conclusion

Vue 3 already has great support for CSS. You can use Vue 3 reactive variables in the style section, pass styles from parent to child components, etc. Now this :slotted() pseudo-class allows you to apply styles to the slot elements.

This feature gives us better control over our styles, improves code maintainability, and helps us to write cleaner code for our Vue applications.

I hope this guide was helpful in improving your understanding of how to style slot elements in a Vue 3 component using slotted selectors.