Skip to content

Async custom element does not inject value if it was moved before it was loaded #8127

@Truevoly

Description

@Truevoly

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vite-m1kzad?file=main.js

Steps to reproduce

  1. Open the page
  2. Wait for async component to resolve
  3. Validate that it renders provided value
  4. Uncomment setTimeout
  5. Validate that it renders default value

What is expected?

Both times provided value should be rendered

What is actually happening?

default value is rendered second time instead

System Info

No response

Any additional comments?

I was reading the source code for apiCustomElement.ts to better understand how provide/inject works in custom elements.
I've noticed that in _resolveDef method property _resolved is assigned to true before it is actually resolved. Since that property is queried in connectedCallback, I've wondered if I can move element before it is actually resolved, and that if that would force resolve method to run immediately. Sure enough it did.
However, this did not break rendering of the element, so it seems that render function handles different types of vnodes correctly (vnode.type returns different values, which probably also shouldn't be the case). But since internal Vue instance is created before definition was loaded, it does not know what values to provide

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions