diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 60b51de3893..eb9e25e7584 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -191,13 +191,21 @@ describe('defineCustomElement', () => { test('handling properties set before upgrading', () => { const E = defineCustomElement({ - props: ['foo'], + props: { + foo: String, + dataAge: Number + }, + setup(props) { + expect(props.foo).toBe('hello') + expect(props.dataAge).toBe(5) + }, render() { return `foo: ${this.foo}` } }) const el = document.createElement('my-el-upgrade') as any el.foo = 'hello' + el.dataset.age = 5 container.appendChild(el) customElements.define('my-el-upgrade', E) expect(el.shadowRoot.innerHTML).toBe(`foo: hello`) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index a532da4c6c7..37356c86f26 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -233,7 +233,7 @@ export class VueElement extends BaseClass { } if (numberProps) { this._numberProps = numberProps - this._update() + // this._update() } // check if there are props set pre-upgrade or connect @@ -258,7 +258,9 @@ export class VueElement extends BaseClass { const asyncDef = (this._def as ComponentOptions).__asyncLoader if (asyncDef) { - asyncDef().then(resolve) + asyncDef() + .then(resolve) + .then(() => this._update()) } else { resolve(this._def) }