fix(custom-elements): should not reflect non-decalred properties set before upgrade

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 68049efe7a3276078390ce0885ce5df72cbab2ae..03a5361d69009735a6b40f2b83c35121f9120624 100644 (file)
--- 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 fc68bb43f26d7b9ce1a80afe6c05d252a00897e9..55530b98c3278ec28c1576b414c6ceaa1dd00af2 100644 (file)
--- 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
+          )
         }
       }