fix(runtime-dom): prevent setting state as attribute for custom elements (#11165)

close #11163

Author: jh-leong

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -9,6 +9,7 @@ import {
   inject,
   nextTick,
   ref,
+  render,
   renderSlot,
 } from '../src'
 
@@ -137,7 +138,7 @@ describe('defineCustomElement', () => {
 
   describe('props', () => {
     const E = defineCustomElement({
-      props: ['foo', 'bar', 'bazQux'],
+      props: ['foo', 'bar', 'bazQux', 'value'],
       render() {
         return [
           h('div', null, this.foo),
@@ -147,6 +148,12 @@ describe('defineCustomElement', () => {
     })
     customElements.define('my-el-props', E)
 
+    test('renders custom element w/ correct object prop value', () => {
+      render(h('my-el-props', { value: { x: 1 } }), container)
+      const el = container.children[0]
+      expect((el as any).value).toEqual({ x: 1 })
+    })
+
     test('props via attribute', async () => {
       // bazQux should map to `baz-qux` attribute
       container.innerHTML = `<my-el-props foo="hello" baz-qux="bye"></my-el-props>`

packages/runtime-dom/src/patchProp.ts

@@ -54,7 +54,11 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
     )
     // #6007 also set form state as attributes so they work with
     // <input type="reset"> or libs / extensions that expect attributes
-    if (key === 'value' || key === 'checked' || key === 'selected') {
+    // #11163 custom elements may use value as an prop and set it as object
+    if (
+      !el.tagName.includes('-') &&
+      (key === 'value' || key === 'checked' || key === 'selected')
+    ) {
       patchAttr(el, key, nextValue, isSVG, parentComponent, key !== 'value')
     }
   } else {