Version

3.2.20

Reproduction link

github.com

Steps to reproduce

1. go to custom-element-attribute-bug and npm i and npm build (the build is watched)
2. go to vue-sandbox and npm i and npm serve
3. Upon opening the app you'll see in the console the warning because a required prop is unset and three console outputs showing the state of the prop at various lifecyle points

What is expected?

I'd expect the attributes to be set as props ideally before the setup function runs, definitely before mounted.

What is actually happening?

It appears that the component is mounted without any attributes being reflected as props and we have to wait until an update after mounting before being able to access the props.

It's an issue to wait for the component to be updated before we are given props. This is particularly problematic since its not exposed to the component whether the prop will ever be set or if we need to do the work to handle the case where its not set by the end user.

For reference this also occurs when using the custom element in other frameworks such as react.

Note doing some work to mount a created app in the ConnectedCallback of a custom element avoids this issue, but I'd like to use the provided custom element functionality from vue instead of having to do this.

connectedCallback(): void {
    const props: { [index: string]: string } = {}
    for (const prop of this.propsList) {
      let propValue = this.attributes.getNamedItem(prop)?.value
      props[prop] = propValue
    }

    const app = createApp(this.app, props)

    const shadowRoot = this.attachShadow({ mode: 'open' })
    const wrapper = document.createElement('div')
    authApp.mount(wrapper)
    shadowRoot.appendChild(wrapper.children[0])
}

duplicate of #4716

I'll reopen this as I am as of now not sure wether my fix in #4792 will fix this issue - it does fix #4716 however.

thanks for the update

@LinusBorg any new thoughts on this?

Looks like the same bug as #4716 and fixed by 3ca8317