From 5e509091000779acbfae4c85cc1cc3973b1b2e64 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 11 Nov 2022 14:14:55 +0800 Subject: [PATCH] fix(custom-elements): should not reflect non-decalred properties set before upgrade --- packages/runtime-dom/__tests__/customElement.spec.ts | 7 +++++-- packages/runtime-dom/src/apiCustomElement.ts | 7 ++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 68049efe7a3..03a5361d690 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -201,15 +201,18 @@ describe('defineCustomElement', () => { expect(props.dataAge).toBe(5) }, render() { - return `foo: ${this.foo}` + return h('div', `foo: ${this.foo}`) } }) const el = document.createElement('my-el-upgrade') as any el.foo = 'hello' el.dataset.age = 5 + el.notProp = 1 container.appendChild(el) customElements.define('my-el-upgrade', E) - expect(el.shadowRoot.innerHTML).toBe(`foo: hello`) + expect(el.shadowRoot.firstChild.innerHTML).toBe(`foo: hello`) + // should not reflect if not declared as a prop + expect(el.hasAttribute('not-prop')).toBe(false) }) // https://github.com/vuejs/core/issues/6163 diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index fc68bb43f26..55530b98c32 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -248,7 +248,12 @@ export class VueElement extends BaseClass { // check if there are props set pre-upgrade or connect for (const key of Object.keys(this)) { if (key[0] !== '_') { - this._setProp(key, this[key as keyof this], true, false) + this._setProp( + key, + this[key as keyof this], + rawKeys.includes(key), + false + ) } }