Implement with defineCustomElement from Vue

[craigrileyuk]

So there's the example for defining a new Web Component in the docs:

import install from '@twind/with-web-components'
import config from './twind.config'

const withTwind = install(config)

class TwindElement extends withTwind(HTMLElement) {
  constructor() {
    super()

    const shadow = this.attachShadow({ mode: 'open' })

    shadow.innerHTML = `<h1 class="text-3xl font-bold underline">Hello world!</h1>`
  }
}

customElements.define('twind-element', TwindElement)

but how would this combine with:

import { defineCustomElement } from "vue";
import SomeElement from "./components/SomeElement.ce.vue";

const TwElement = defineCustomElement(SomeElement);

TwElement is returned a fully-fledged class definition with its own constructor.

I know I could just write my components in Vanilla Javascript, but I prefer the Vue way and being able to create a Web Components library in Vue with multi-component Tailwind support would be amazing.

[craigrileyuk]

Had an idea literally seconds after posting this.

Swapped out passing HTMLElement to the withTwind function for TwElement and it works perfectly.