Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue3 custom element does not render below Chrome 65 #9614

Closed
peixin opened this issue Nov 16, 2023 · 0 comments
Closed

Vue3 custom element does not render below Chrome 65 #9614

peixin opened this issue Nov 16, 2023 · 0 comments
Labels
browser specific 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has PR A pull request has already been submitted to solve the issue scope: custom elements

Comments

@peixin
Copy link
Contributor

peixin commented Nov 16, 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

@haoqunjiang haoqunjiang added browser specific has PR A pull request has already been submitted to solve the issue 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements labels Nov 30, 2023
peixin added a commit to peixin/vue that referenced this issue Dec 29, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Jun 21, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
browser specific 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has PR A pull request has already been submitted to solve the issue scope: custom elements
Projects
None yet
Development

No branches or pull requests

2 participants