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;
}