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

customElements.define('my-tag', Vue.defineCustomElement({
  template: `
    <div>
      <div>$props: {{$props}}</div>
      <div>$attrs: {{$attrs}}</div>
    </div>
  
  `,

  props: {
    foo_bar: { type: String,  },
    fooBar:  { type: String,  },
  },
  created() {
    console.log(this.$props)
    console.log(this.$attrs)
  }
}))

const app = Vue.createApp({
  template: `
    <div><my-tag foo_bar="OK" foo-bar="OK" /></div>
  `
})

app.mount('#app')