Eigene Web-Element-Definition mit Shadow-DOM-Attribut-Reflektion

import { defineCustomElement, h } from 'vue';
 
const CustomBadgeElement = defineCustomElement({
  props: {
    variant: { type: String, default: 'info' }
  },
  emits: ['badgeClick'],
  setup(props, { emit }) {
    return () => h('button', {
      class: `badge-${props.variant}`,
      onClick: (e) => emit('badgeClick', e)
    }, [h('slot')]);
  }
});
 
customElements.define('x-custom-badge', CustomBadgeElement);