Problem using external web components (made with lit) in vue

[ray007]

I have several web components made with lit, and would now like to build a configurator around them with a VueJS based UI framework.

Unfortunately, vuejs always seems to scrap my defined custom attributes (properties).
Is there no way to tell vue-js to not filter attributes for custom elements?

After a long search, where I found nothing that should work with pure JS-based custom elements, I came upon https://vuejs.org/guide/extras/web-components.html#non-vue-web-components-and-typescript.
So I then started to converting my components to TS and tried again.

I now found my tags with custom attributes, but for some reason the custom-element registration had failed.
When trying to force the custom element registration, I lost the custom attributes again.

I then made another attempt with https://github.com/lit/lit/tree/main/packages/labs/gen-wrapper-vue, but wasn't able to make that work so far either.

Has anyone a working example of using lit-based custom elements in a VueJS application?
Or any hints, what I could have done wrong?

Related issues:

• Not possible to set attributes (template syntax) on web components/custom elements #13104
• Attributes are lost when using native customElements. #12584