fix(runtime): only use setter if existing (#5947)

* fix(runtime): only use setter if existing

* prettier

src/mock-doc/element.ts

@@ -126,6 +126,12 @@ patchPropAttributes(
  },
 );
 
+Object.defineProperty(MockButtonElement.prototype, 'form', {
+ get(this: MockElement) {
+ return this.hasAttribute('form') ? this.getAttribute('form') : null;
+ },
+});
+
 export class MockImageElement extends MockHTMLElement {
  constructor(ownerDocument: any) {
  super(ownerDocument, 'img');

src/runtime/vdom/set-accessor.ts

@@ -136,7 +136,11 @@ export const setAccessor = (
  if (memberName === 'list') {
  isProp = false;
  } else if (oldValue == null || (elm as any)[memberName] != n) {
- (elm as any)[memberName] = n;
+ if (typeof (elm as any).__lookupSetter__(memberName) === 'function') {
+ (elm as any)[memberName] = n;
+ } else {
+ elm.setAttribute(memberName, n);
+ }
  }
  } else {
  (elm as any)[memberName] = newValue;

src/runtime/vdom/test/set-accessor.spec.ts

@@ -886,4 +886,16 @@ describe('setAccessor for standard html elements', () => {
  expect(elm.style.cssText).toEqual('margin: 30px; color: orange;');
  });
  });
+
+ it('uses setAttribute if element has not setter', () => {
+ const elm = document.createElement('button');
+ const spy = jest.spyOn(elm, 'setAttribute');
+ setAccessor(elm, 'form', undefined, 'some-form', false, 0);
+ expect(spy.mock.calls).toEqual([['form', 'some-form']]);
+
+ const elm2 = document.createElement('button');
+ const spy2 = jest.spyOn(elm2, 'setAttribute');
+ setAccessor(elm2, 'textContent', undefined, 'some-content', false, 0);
+ expect(spy2.mock.calls).toEqual([]);
+ });
 });