Styling Vue Slot

Question

Is there any way to style a slot in a Vue component?

<slot style="position: absolute"></slot>

and

<slot class="slot"></slot>

do not work.

Answer 1

Wrap the slot in a <div> and style the <div> instead:

<div style="...">
  <slot></slot>
</div>

If you really need to style the slot element, you can use CSS selectors like this:

<div class="wrapper">
  <slot></slot>
</div>

.wrapper > * {
  color: red;
}

Answer 2

I found such a way out.

    computed: {
        isAppBoxSlotActive() {
            return Boolean(this.$slots['app-box']);
        }
    },

    <div v-if="isAppBoxActive"
         :class="$style['app-box']">
        <slot name="app-box">...</slot>
    </div>

Answer 3

You can pass a class from the parent like so:

In the component template:

<slot name="quoteText"></slot>

And when passing to the slot:

<p slot="quoteText" class="mb-md-100">Text</p>