Providing null to a readonly property of a HTMLElement leads to an error instead of a warning

[atilleul]

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Writing <template><select id="foo" name="foo" :type="undefined" /></template> in a Vue component to see an error in the console: type is a read-only property of HTMLSelectElement.

Browsers:

• Microsoft Edge Version 99.0.1150.30 (Official build) (64-bit)
• Chrome Version 99.0.4844.51 (Official Build) (64-bit)

Error in the console: TypeError: Cannot set property type of #<HTMLSelectElement> which has only a getter (runtime-dom.esm-bundler.js?830f:261)

Browser:

• Firefox Version 98.0 (64-bit)

Error in the console: TypeError: setting getter-only property "type"

What is expected?

Writing <select id="foo" name="foo" type="bar" /> in the template throws a warning and not an error. This is what we should have also when value == null.

What is actually happening?

A JavaScript error is thrown instead of a warning.

---

In the function patchDOMProp of runtime-dom.esm-bundler.js, it tries to set an empty string to the read-only property: el[key] = '';. The error should be managed by wrapping this line into a try/catch.

[sudongyuer]

#5550 solved