JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<script src="https://unpkg.com/vue@next"></script>
<my-vue-element class="banana"></my-vue-element>


<my-vue-element></my-vue-element>

CSS

.banana {
  --bg: green;
}

JavaScript

const MyVueElement = Vue.defineCustomElement({
  // normal Vue component options here
  props: {},
  emits: {},
  template: `<div>hello world</div>`,

  // defineCustomElement only: CSS to be injected into shadow root
  styles: [
  `div {
  	background-color: var(--bg, red);
  `]
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)