feat(warns): avoid warning native modifiers on dynamic components (#11052)

Co-authored-by: Andrzej Swaton <[email protected]>

Author: jedrula

src/core/vdom/create-element.js

@@ -98,7 +98,7 @@ export function _createElement (
     ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
     if (config.isReservedTag(tag)) {
       // platform built-in elements
-      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
+      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn) && data.tag !== 'component') {
         warn(
           `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
           context

test/unit/features/directives/on.spec.js

@@ -474,6 +474,20 @@ describe('Directive v-on', () => {
     expect(spy.calls.count()).toBe(0)
   })
 
+  it('should not throw a warning if native modifier is used on a dynamic component', () => {
+    vm = new Vue({
+      el,
+      template: `
+        <component is="div" @click.native="foo('native')" @click="foo('regular')"/>
+      `,
+      methods: { foo: spy },
+    })
+
+    triggerEvent(vm.$el, 'click')
+    expect(`The .native modifier for v-on is only valid on components but it was used on <div>.`).not.toHaveBeenWarned()
+    expect(spy.calls.allArgs()).toEqual([['regular']]); // Regular @click should work for dynamic components resolved to native HTML elements.
+  })
+
   it('.once modifier should work with child components', () => {
     vm = new Vue({
       el,