slot に対する変更（script setup を使わない）

SlotOperation.vue

<script>
import { mergeProps } from 'vue'

export default {
  setup(props, context) {
    const slotContent = context.slots?.default?.()
    if (slotContent) {
      slotContent.forEach(vNode => {
        vNode.props.class = (vNode.props.class ?? '') + ' foo'
        vNode.props.style = mergeProps(vNode.props.style, style)
      })
    }
    return () => slotContent ?? null
  }
}
</script>

<template>
  {{ render }}
</template>

<script setup> の場合

<script setup>
import { mergeProps, useSlots } from 'vue'

const props = defineProps({ ratio: Object})
const slotContents = useSlots().default?.()
if (slotContents) {
  slotContents.forEach(vNode => {
    vNode.props.class = (vNode.props.class ?? '') + ' foo'
    vNode.props.style = mergeProps(vNode.props.style, style)
  })
}
</script>

<template>
  <slot />
</template>