JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="app">
<h3>
Fragment Vue  2
</h3>
  {{msg}}
  <button @click="msg+='.'">
  change message
  </button>


   
   
   <fragment>dddd{{bar}}<b v-if="bar<15"> {{bar}} is less then 15</b><b v-else>reduce to less then 15 to see other message</b></fragment>
 {{msg}}
 
  <fragment><Hello></Hello><fragment><Bye></Bye></fragment></fragment>
  <button @click="bar--">
  --
  </button>
    <button @click="bar++">
  ++
  </button>

</div>

<div id="app3">

</div>

CSS

#app {
  margin-top:50px;
}

JavaScript

import Vue2 from "https://unpkg.com/[email protected]/dist/vue.esm.browser.js"
 // Author Lidlanca 2021 
 
// last working 
// v17, v20, 
// v22(works with text nodes in fragment)  changed from children to childNodes

Vue2.component('my-component2', {
  template: "<div><slot></slot></div>",
  mounted() {
    //console.log("NNNN", this)
  },
  beforeMount() {

  }
})

Vue2.component('Hello', {
  template: "<b>Hello World</b>"
});
Vue2.component('Bye', {
  template: "<b>Bye World</b>"
});


// Fragment component, will render anything passed to it without a wrapping element.
// <fragment><b>hello</b></fragment>

// fragments can be nested 
//  <fragment><b>hello</b><b>world</b><fragment><b>bye</b><b>world</b></fragment></fragment>
// will render:
//  <b>hello</b><b>world</b><b>bye</b><b>world</b>
Vue2.component('fragment', {
  template: `<div style="display:none"><slot></slot></div>`,
  data(){
    return {
     beforeUpdated :0
    }
  },
  mounted() {
      	this.children = [...this.$el.childNodes ]
    		this.moveToTarget()
  },
  beforeMount() {

  },
  
  methods: {
    moveToTarget() {
      //console.log(this.$el)
      this.children = [...this.$el.childNodes ]
      this.children.forEach(c => {
        this.children.push(c)
        this.$el.parentNode.insertBefore(c, this.$el)
      })
    },
    moveBack() {
      this.children.forEach(c => {
        this.$el.append(c)
      })
    }
  },
  
  beforeUpdate() {
   
   // console.log("before update")
    if (this.beforeUpdated == 'back') {
      return
    }
    if (this.beforeUpdated == 'backToTarget') {
      this.beforeUpdated = ''
      return
    }
    this.moveBack()
    //this.$forceUpdate();
    this.beforeUpdated = 'back'

  },
  updated() {
   // console.log("updated")
    if (this.beforeUpdated == 'back') {
      this.moveToTarget()
      this.$forceUpdate();
      this.beforeUpdated = 'backToTarget'
    }
  }
  
})



var app1 = new Vue2({
  el: '#app',
  data() {
    return {
      msg: "hello",
     ...