Rule Proposal: Disallow shadowing of native HTML event names

[JoCa96]

Please describe what the rule should do: Using native HTML event names (like click) for Vue component emits can lead to incorrect assumptions about the emit and cause confusion. This is caused by Vue emits behaving differently from native events. E.g. :

• The payload of a Vue emit can be chosen arbitrarily
• Vue emits do not bubble, while most native events do
• Event modifiers only work on HTML events or when the original event is re-emitted as emit payload.
• When the native event is re-emitted the event.target might not match the actual event-listener's location.

The rule would mostly be aimed at developers of component libraries or web components.

What category should the rule belong to?

[ ] Enforces code style (layout) [x] Warns about a potential error (problem) [x] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
  <!-- ✓ GOOD -->
  <button @click="$emit('close')">Close</button>
  <!-- ✗ BAD -->
  <button @click="$emit('click')">Close</button>
</template>
<script>
export default {
  <!-- ✓ GOOD -->
  emits: ['close'],
  <!-- ✗ BAD -->
  emits: ['click'],
}
</script>

Additional context From a clean code perspective it is preferable to use an emit name that communicates intent (e.g., "close", "accept", "loadMore") over generic names.