warn against reserved element tags as component ids

Author: yyx990803

src/instance/api/global.js

@@ -6,6 +6,7 @@ import {
   classify,
   toArray,
   commonTagRE,
+  reservedTagRE,
   warn,
   isPlainObject
 } from '../../util/index'
@@ -167,9 +168,12 @@ export default function (Vue) {
       } else {
         /* istanbul ignore if */
         if (process.env.NODE_ENV !== 'production') {
-          if (type === 'component' && commonTagRE.test(id)) {
+          if (
+            type === 'component' &&
+            (commonTagRE.test(id) || reservedTagRE.test(id))
+          ) {
             warn(
-              'Do not use built-in HTML elements as component ' +
+              'Do not use built-in or reserved HTML elements as component ' +
               'id: ' + id
             )
           }

src/util/component.js

@@ -4,6 +4,7 @@ import { getAttr, getBindAttr } from './dom'
 import { isArray, isPlainObject } from './lang'
 
 export const commonTagRE = /^(div|p|span|img|a|b|i|br|ul|ol|li|h1|h2|h3|h4|h5|h6|code|pre|table|th|td|tr|form|label|input|select|option|nav|article|section|header|footer)$/
+export const reservedTagRE = /^(slot|partial|component)$/
 
 /**
  * Check if an element is a component, if yes return its
@@ -17,7 +18,7 @@ export const commonTagRE = /^(div|p|span|img|a|b|i|br|ul|ol|li|h1|h2|h3|h4|h5|h6
 export function checkComponentAttr (el, options) {
   var tag = el.tagName.toLowerCase()
   var hasAttrs = el.hasAttributes()
-  if (!commonTagRE.test(tag) && tag !== 'component') {
+  if (!commonTagRE.test(tag) && !reservedTagRE.test(tag)) {
     if (resolveAsset(options, 'components', tag)) {
       return { id: tag }
     } else {

src/util/options.js

@@ -10,7 +10,7 @@ import {
   camelize
 } from './lang'
 import { warn } from './debug'
-import { commonTagRE } from './component'
+import { commonTagRE, reservedTagRE } from './component'
 
 /**
  * Option overwriting strategies are functions that handle
@@ -233,9 +233,9 @@ function guardComponents (options) {
     var ids = Object.keys(components)
     for (var i = 0, l = ids.length; i < l; i++) {
       var key = ids[i]
-      if (commonTagRE.test(key)) {
+      if (commonTagRE.test(key) || reservedTagRE.test(key)) {
         process.env.NODE_ENV !== 'production' && warn(
-          'Do not use built-in HTML elements as component ' +
+          'Do not use built-in or reserved HTML elements as component ' +
           'id: ' + key
         )
         continue

test/unit/specs/util/options_spec.js

@@ -161,7 +161,15 @@ describe('Util - Option merging', function () {
         a: { template: 'hi' }
       }
     })
-    expect(hasWarned('Do not use built-in HTML elements')).toBe(true)
+    expect(hasWarned('Do not use built-in or reserved HTML elements as component id: a')).toBe(true)
+    merge({
+      components: null
+    }, {
+      components: {
+        slot: { template: 'hi' }
+      }
+    })
+    expect(hasWarned('Do not use built-in or reserved HTML elements as component id: slot')).toBe(true)
   })
 
   it('should ignore non-function el & data in class merge', function () {