JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <conditional-wrapper :wrapper="wrapper">
    Content content content
  </conditional-wrapper>
  <button @click="toggle">
    Toggle
  </button>
</div>

JavaScript

const ConditionalWrapper = (props, { slots }) => {
  const { wrapper, ...attrs } = props
  
  if (wrapper) {
    return Vue.h(wrapper, attrs, slots)
  }
  
  return slots.default ? slots.default() : null
}

Vue.createApp({
  components: {
    ConditionalWrapper
  },
  
  data () {
    return {
      wrapper: null
    }
  },
  
  methods: {
    toggle () {
      const wrappers = ['strong', 'button', null]
      this.wrapper = wrappers[(wrappers.indexOf(this.wrapper) + 1) % 3]
    }
  }
}).mount('#app')