Vue3 custom element does not render below Chrome 65
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
Chrome/66.0.3347.0
Chrome/118.0.0.0
System Info
No response
Any additional comments?
No response