Vue3 S2 - Render Function

Suppose we'd like to create a Stack component like below.

<Stack size="4">
  <div>hello world</div>
  <div>hello world</div>
  <Stack size="2">
    <div>hello world</div>
    <div>hello world</div>
  </Stack>
</Stack>

The rendered html will be like below, which actually manipulate the DOM. In this case, we can use the render function.

<div class="stack">
  <div class="mt-4">
    <div>hello world</div>
    <div>hello world</div>
  </div>
  <div class="stack">
    <div class="mt-2">
      <div>hello world</div>
      <div>hello world</div>
    </div>
  </div>
</div>

Our render function:

import {h} from 'vue';

const Stack = {
  render() {
    const slot = this.$slot.default ? this.$slot.default : [];

    return h(
      'div',
      {class: 'stack'},
      slot.map((child) => {
        return h('div', {class: `mt-${this.$props.size}`}, [child]);
      }),
    );
  },
};