Loss of reactivity on DOM related objects

[fcecilie]

Version

3.6.0-alpha.2

Reproduction link

play.vuejs.org/

Steps to reproduce

Press each buttons on the example to increment the property of each class.

What is expected?

When pressing each button, the property of the related class should be updated and vuejs should render the new value since both class are reactive.

What is actually happening?

DOMRelatedClass do not trigger a rerender when its property is updated.

---

Bug is also present on DOMPoint, it is on that one that I first encountered the bug when I was creating a 2d rendering engine with canvas.

[KazariEX]

EventTarget is not a valid reactive target.

Object.prototype.toString.call(new EventTarget); // [object EventTarget]

core/packages/reactivity/src/reactive.ts

Lines 43 to 56 in 45547e6

	function targetTypeMap(rawType: string) {
	switch (rawType) {
	case 'Object':
	case 'Array':
	return TargetType.COMMON
	case 'Map':
	case 'Set':
	case 'WeakMap':
	case 'WeakSet':
	return TargetType.COLLECTION
	default:
	return TargetType.INVALID
	}
	}

[KazariEX]

Workaround:

class DOMRelatedClass extends EventTarget {
  [Symbol.toStringTag]() {
    return "Object";
  }
}

[fcecilie]

Workaround:

class DOMRelatedClass extends EventTarget {
Symbol.toStringTag {
return "Object";
}
}

Hello @KazariEX , thanks for the workaround but it seems to break when calling EventTarget methods on DOMRelatedClass :

play.vuejs.org/

You get errors such as : 'addEventListener' called on an object that does not implement interface EventTarget.