diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts index fc5fdde057c..6ffa6845cea 100644 --- a/packages/runtime-dom/__tests__/patchProps.spec.ts +++ b/packages/runtime-dom/__tests__/patchProps.spec.ts @@ -1,7 +1,10 @@ import { patchProp } from '../src/patchProp' import { render, h } from '../src' +import { mockWarn } from '@vue/shared' describe('runtime-dom: props patching', () => { + mockWarn() + test('basic', () => { const el = document.createElement('div') patchProp(el, 'id', null, 'foo') @@ -92,4 +95,16 @@ describe('runtime-dom: props patching', () => { patchProp(el, 'srcObject', null, null) expect(el.srcObject).toBe(intiialValue) }) + + test('catch and warn prop set TypeError', () => { + const el = document.createElement('div') + Object.defineProperty(el, 'someProp', { + set() { + throw new TypeError('Invalid type') + } + }) + patchProp(el, 'someProp', null, 'foo') + + expect(`Failed setting prop "someProp" on
`).toHaveBeenWarnedLast() + }) }) diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts index 4a9b34c526e..fed5c6c90e5 100644 --- a/packages/runtime-dom/src/modules/props.ts +++ b/packages/runtime-dom/src/modules/props.ts @@ -1,6 +1,9 @@ // __UNSAFE__ // Reason: potentially setting innerHTML. // This can come from explicit usage of v-html or innerHTML as a prop in render + +import { warn } from '@vue/runtime-core' + // functions. The user is reponsible for using them with only trusted content. export function patchDOMProp( el: any, @@ -35,6 +38,17 @@ export function patchDOMProp( // e.g.
el[key] = '' } else { - el[key] = value + // some properties perform value validation and throw + try { + el[key] = value + } catch (e) { + if (__DEV__) { + warn( + `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` + + `value ${value} is invalid.`, + e + ) + } + } } }