I try to integrate a third party custom web component into a vue/cli projects vue component.

The custom web component integration works inside a standard HTML page and works also inside an Angular project with CUSTOM_ELEMENTS_SCHEMA enabled.
Just in Vue.js projects it does not work and gives errors in developer console. I am trying to use it inside a vue/cli project but also setup a new test vue/vite project with the same result.

I import the third party Javascript via a script tag in index.html. To the custom web component element I add

v-pre

to exclude it from Vue’s processing. In the vue/vite test project this is done inside vite.config.js.

Here is a the error message and a screenshot of the error position in bundle.js:

> bundle.min.js:3 Uncaught TypeError: Cannot set properties of undefined
> (setting 'borderRadius')
>     at T._applyAttributes (bundle.min.js:3:11650)
>     at T.init (bundle.min.js:3:7009)
>     at T.connectedCallback (bundle.min.js:3:7149)
>     at insert (runtime-dom.esm-bundler.js:16:1)
>     at mountElement (runtime-core.esm-bundler.js:5545:1)
>     at processElement (runtime-core.esm-bundler.js:5455:1)
>     at patch (runtime-core.esm-bundler.js:5323:1)
>     at mountChildren (runtime-core.esm-bundler.js:5583:1)
>     at processFragment (runtime-core.esm-bundler.js:5797:1)
>     at patch (runtime-core.esm-bundler.js:5309:1)

As I said that kind of integration works natively and with Angular. Just Vue refuses to work.

To test further I just tried to integrate one of my own custom web components into the Vue app and that worked out of the box.

Wondering whats happening here! It really lacks surface to start debugging that issue.