Subscribe on changes!

Vue3 custom element does not render below Chrome 65

avatar
Nov 16th 2023

Vue version

3.3.4

Link to minimal reproduction

https://vue3-custom-component.vercel.app/

Steps to reproduce

Vue3 custom element (Web Component) does not render below Chrome 65 (Android 8 built-in webview)

see https://github.com/peixin/vue3-custom-component

When isCustomizedBuiltIn is false, Vue3 passes undefined as the second argument to document.createElement through nodeOps.createElement when the built-in tag name is not used as a custom element. This usage does not work in Chrome versions prior to 66, meaning that the constructor and connectedCallback of the custom element will not be triggered.

Interestingly, starting from version 66, the constructor will not be triggered upon creation, but when appended to the DOM, the constructor and connectedCallback will be triggered in sequence, allowing it to function properly. In the latest version, the constructor will be triggered upon creation, and when appended to the DOM, the connectedCallback will be triggered.

What is expected?

The custom-element tag placed in vue template is correctly displayed in page.

custom-element with text: placed in vue template
custom-element with text: placed in html body
custom-element with text: append programmatically using pure JavaScript

What is actually happening?

Chrome/65.0.3325.144 image

Chrome/66.0.3347.0 image

Chrome/118.0.0.0 image

System Info

No response

Any additional comments?

No response