WebComponent without shadow-root

[0ptional]

Hey everyone!

I have built a web component (vue 3.5.x + vite) which currently uses a shadow-root. It all works, but I need the component to not be in a shadow dom. So I set shadowRoot: false in the defineCustomElement. But when using the web component, I get:

TypeError: Cannot read properties of null (reading 'prepend')
    at r._applyStyles (app.umd.cjs:8:47531)
    at r._injectChildStyle (app.umd.cjs:8:48215)

It tries to inject the styles into the shadow root, which does not exist. How can I prevent this? And how are the css styles included without a shadow dom? Should vite generate a css file?

Thanks for any help!

[hex0id]

same issue here:

app-warranty.umd.cjs:8 Uncaught TypeError: Cannot read properties of null (reading 'prepend')
    at B._applyStyles (app-warranty.umd.cjs:8:71255)

Due to this error style element will never be created which means app has no styles:

     _applyStyles(g, K) {
            if (!g)
                return;
            if (K) {
                if (K === this._def || this._styleChildren.has(K))
                    return;
                this._styleChildren.add(K)
            }
            const z = this._nonce;
            for (let B = g.length - 1; B >= 0; B--) {
                const D = document.createElement("style");
                z && D.setAttribute("nonce", z),
                D.textContent = g[B],
                this.shadowRoot.prepend(D)
            }
        }

[yzend]

If you use shadow-root, do not use *.ce.vue in the component name, in order not to package the style for internal styling.
Style files can be referenced separately in the application