JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cosmo/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.min.js"></script>
<div id="app">
  <bs-button name="a" context="primary" body="Hello world!"></bs-button>

  <i-frame>
    <bs-button name="a" context="primary" body="Hello world!"></bs-button>
  </i-frame>
</div>

JavaScript

Vue.component('i-frame', {
  render(h) {
    return h('iframe');
  },
  mounted() {
  	console.log(this.$el);
  }
});

Vue.component('bs-button', {
  template: `
<component :is="name" :class="'btn btn-' + context">{{body}}</component>
  `,
  props: ['name', 'context', 'body'],
  mounted() {
    var iframe = this.iframe = document.createElement('iframe');
    console.log(this.$el);
    // this.$el.appendChild('iframe');
  },
});

new Vue({
  el: '#app',
})