Error in _injectChildStyle when shadowRoot is disabled in CustomElementApi

[seperez-ncl]

Vue version

3.5.13

Link to minimal reproduction

codesandbox.io/p/live/442d0220-8af3-45b5-b2ed-2ab21cf088d8

Steps to reproduce

1- Create a Vue component with child component inside with scoped styles. using the Custom Element API.
2- Disable Shadow DOM.
3- Open the browser console and observe the shadowRoot error when _injectChildStyle runs.

What is expected?

When the shadowRoot option is disabled (or otherwise omitted) and child components have their own styles, Vue should inject (or refrain from injecting) those styles without throwing console errors.

What is actually happening?

Currently, when shadowRoot is disabled, the _injectChildStyle function attempts to apply child styles to a Shadow DOM. Since shadowRoot does not exist, a console error occurs indicating it cannot access shadowRoot or its methods.

System Info

No response

Any additional comments?

No response

[edison1105]

Please follow the issue requirement and provide a minimal runnable reproduction
cannot reproduce see Playground

[seperez-ncl]

Hello @edison1105 ,

Thank you for looking into this. I understand that you were unable to reproduce the issue using the defineCustomElement function. However, in our case, we are extending the VueElement class directly in order to inject global styles into the web component something that should, in theory, work similarly to defineCustomElement but appears to behave differently in practice.

Here are more details:

1. Extending VueElement:

• We create a class that inherits from VueElement to have additional control when injecting global styles and setting up certain properties before the component is mounted.

• This approach is necessary because we have shared style rules for multiple web components, which we need to inject dynamically.

2. Expected Behavior (Similar to defineCustomElement):

• We initially assumed that extending VueElement directly would be analogous to the internal process of defineCustomElement.

• However, with our extended class, we encounter issues related to style injection or the component’s lifecycle—issues we do not see when using defineCustomElement.

If anyone has insight into potential internal differences between defineCustomElement and directly extending VueElement or knows of any additional hooks we might need to implement your advice would be greatly appreciated. Thank you very much for your time and assistance!

[edison1105]

Please try to provide a minimal runnable reproduction for a further look.

[seperez-ncl]

I was able to reproduce the issue, and it turns out it specifically occurs when the component used to register the custom element is compiled with the customElement property during the build process.
https://codesandbox.io/p/live/442d0220-8af3-45b5-b2ed-2ab21cf088d8

[edison1105]

@seperez-ncl
the reproduction link shows page not found when opened