JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app"></div>

CSS

.red {
  color: red;
}

.yellow {
  background-color: yellow;
}

.dotted {
  border: 1px dotted blue;
}

JavaScript

const MyGrandChild = {
  template: `
    <div :class="cls">
      Child <button @click="cls = 'red'.replace(cls, '')">Change</button>
    </div>
  `,
  
  data () {
    return {
      cls: 'red'
    }
  }
}

const MyChild = {
  template: `
    <my-grand-child @contextmenu.native.prevent="cls = 'dotted'.replace(cls, '')" :class="cls" />
  `,
  
  components: {
    MyGrandChild
  },
  
  data () {
    return {
      cls: 'dotted'
    }
  }
}

Vue.directive('highlight', {
  inserted (el) {
    const observer = new MutationObserver(() => {
      if (!el.classList.contains('yellow')) {
        console.log('observer re-adding')
        el.classList.add('yellow')
      }
    })

    observer.observe(el, { attributeFilter: ['class'] })
    
    el.classList.add('yellow')
  }
})

new Vue({
  components: {
    MyChild
  },
  
  template: `
    <my-child v-highlight></my-child>
  `
}).$mount('#app')