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

…before upgrade
vuejs · Nov 11, 2022 · 5e50909 · 5e50909
1 parent 665f2ae
commit 5e50909
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
+          )
         }
       }