In-DOM slot names workaround

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-child>
    <template #[camelize(`foo-bar`)]>
      Hello world!
    </template>
  </my-child>
  <my-child>
    <template #[slots.foobar]>
      Hello world!!
    </template>
  </my-child>
</div>

JavaScript

const MyChild = {
  render() {
    return Vue.h('div', null, {
      default: () => this.$slots.fooBar?.()
    })
  }
}

Vue.createApp({
  components: {
    MyChild
  },
  setup() {
    return {
      camelize: str => str.replace(/-\w/g, c => c.slice(1).toUpperCase()),
      slots: {
        foobar: 'fooBar'
      }
    }
  }
}).mount('#app')