WebComponent without shadow-root #12458

0ptional · 2024-11-22T08:58:32Z

0ptional
Nov 22, 2024

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 · 2024-12-05T17:10:24Z

hex0id
Dec 5, 2024

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)
            }
        }

0 replies

yzend · 2025-05-16T02:51:18Z

yzend
May 16, 2025

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

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

WebComponent without shadow-root #12458

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Vue

WebComponent without shadow-root #12458

0ptional Nov 22, 2024

Replies: 2 comments

hex0id Dec 5, 2024

yzend May 16, 2025

0ptional
Nov 22, 2024

hex0id
Dec 5, 2024

yzend
May 16, 2025