How to rewrite the component in a more functional way?

Question

Vue.js

There is a component

<template>
  <div>
    <span
      v-for="(item, i) in items"
      class="some-class"
      v-super-directive
      :style="{
        'opacity': value
      }"
    >
      HELLO
    </span>
  </div>
</template>

I wanted to make a more versatile wrapper out of it, i.e. just get an element into the slot and process it already. But alas it doesn't work

<template>
  <div>
    <slot
      v-for="(item, i) in items"
      class="some-class"
      v-super-directive
      :style="{
        'opacity': value
      }"
    />
  </div>
</template>

Directive doesn't work, classes don't work, styles don't work. The cycle works)
How can such a component be rewritten? How to work with slots in this case? How to hang a directive on them?
Well, let's say I can hang classes through $slots.default (although I don't want to), but what about the directive? Duplicate all directive code in component? Then what's the point of this nonsense?