JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

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

JavaScript

const App = {
  template: `
		<div>
	    event 'lower' fired {{lower}} times
  	</div>
  	<div>
    	event 'Upper' fired {{upper}} times
  	</div>
  	<fires-events v-on:lower='incrementlower' v-on:Upper='incrementupper'></fires-events>  
  `,

  methods: {
    incrementlower() {
      this.lower++;
    },
    incrementupper() {
      this.upper++;
    }
  },

  data() {
    return {
      lower: 0,
      upper: 0
    }
  },
}
  
const app = Vue.createApp(App)

/*app.config.compilerOptions.isCustomElement = (name) => {
  return name === 'fires-events'
}*/

app.mount('#app')  

customElements.define('fires-events', class extends HTMLElement {
  constructor() {
    super();
    setInterval(() => {
      this.dispatchEvent(new CustomEvent('lower'));
      this.dispatchEvent(new CustomEvent('Upper'));
    }, 1000);
  }
});