Vue: Creating a component named map should warn the user (as with button)

[pqvst]

Version

2.5.15

Reproduction link

https://jsfiddle.net/e2yxoomh/2/

Steps to reproduce

Create a component that includes the word "map" (case insensitive). For example:

• Map
• MapView
• mapper

What is expected?

I expect these to work, or at least give me some sort of error message.

What is actually happening?

Nothing happens. The components do not render. There is no error message.

[posva]

Because you're using the in-browser templates, self-closing tags are not working as expected, so it's not that anything containing map isn't working, it's that things are not passed to Vue as you expect.

About the map element, it should indeed warn it is an existing element (same warning as button), so I'm changing the title of the issue to reflect that

[pqvst]

Ah, I forgot that map is a valid HTML element. But, even if I don't use self-closing tags, a component named MapView doesn't work :/
https://jsfiddle.net/e2yxoomh/11/

[posva]

it does work, you need to use map-view beacuse in browser you cannot use uppercase for element names

[pqvst]

Hmm ok. Well, it seems uppercase works for the first character.

• Foobar => Works
• FooBar => Doesn't work

[posva]

You should checkout the style guide section of the docs, it will help you with that 🙂

[pqvst]

Ok, thanks. In any case, some warnings would be useful. I wasted quite a few hours trying to figure out what was wrong.

[emanuelmutschlechner]

@posva Comparison of reserved Vue HTML tags vs specs. map is already in there.

Vue HTML	MDN	WHATWG
abbr	abbr	abbr
	acronym
address	address	address
	applet
area	area	area
article	article	article
aside	aside	aside
audio	audio	audio
b	b	b
base	base	base
	basefont
bdi	bdi	bdi
bdo	bdo	bdo
	bgsound
	big
	blink
blockquote	blockquote	blockquote
body	body	body
br	br	br
button	button	button
canvas	canvas	canvas
caption	caption	caption
	center
cite	cite	cite
code	code	code
col	col	col
colgroup	colgroup	colgroup
	command
content	content
data	data	data
datalist	datalist	datalist
dd	dd	dd
del	del	del
details	details	details
dfn	dfn	dfn
dialog	dialog	dialog
	dir
div	div	div
dl	dl	dl
dt	dt	dt
element	element
em	em	em
embed	embed	embed
fieldset	fieldset	fieldset
figcaption	figcaption	figcaption
figure	figure	figure
	font
footer	footer	footer
form	form	form
	frame
	frameset
h1	h1	h1
h2		h2
h3		h3
h4		h4
h5		h5
h6		h6
head	head	head
header	header	header
hgroup	hgroup	hgroup
hr	hr	hr
html	html	html
i	i	i
iframe	iframe	iframe
	image
img	img	img
input	input	input
ins	ins	ins
	isindex
kbd	kbd	kbd
	keygen
label	label	label
legend	legend	legend
li	li	li
link	link	link
	listing
main	main	main
map	map	map
mark	mark	mark
	marquee
menu	menu	menu
menuitem	menuitem
meta	meta	meta
meter	meter	meter
	multicol
nav	nav	nav
	nextid
	nobr
	noembed
	noframes
noscript	noscript	noscript
object	object	object
ol	ol	ol
optgroup	optgroup	optgroup
option	option	option
output	output	output
p	p	p
param	param	param
picture	picture	picture
	plaintext
pre	pre	pre
progress	progress	progress
q	q	q
rp	rp	rp
rt	rt	rt
rtc	rtc
ruby	ruby	ruby
s	s	s
samp	samp	samp
script	script	script
section	section	section
select	select	select
shadow	shadow
	slot	slot
small	small	small
source	source	source
	spacer
span	span	span
	strike
strong	strong	strong
style	style	style
sub	sub	sub
summary	summary	summary
sup	sup	sup
table	table	table
tbody	tbody	tbody
td	td	td
template	template	template
textarea	textarea	textarea
tfoot	tfoot	tfoot
th	th	th
thead	thead	thead
time	time	time
title	title	title
tr	tr	tr
track	track	track
	tt
u	u	u
ul	ul	ul
var	var	var
video	video	video
wbr	wbr	wbr
	xmp

---

edited by @posva: collapsed the table as it took too much space

[emanuelmutschlechner]

Warnings only work when components are registered globally e.g.

Vue.component('map', () => import('@js/components/Map'))

When imported and registered locally in components, no warnings are triggered. e.g.

<script>
import Map from '@js/components/Map';
export default {
    components: {Map}
}
</script>
<template>
    <div><map/></div>
<template>

[Justineo]

In any case, some warnings would be useful. I wasted quite a few hours trying to figure out what was wrong.

@pqvst If you use in-DOM template, Vue cannot warn you about the use of something like MapView. They are parsed by the browser first and what Vue got is just an element with the tagname mapview:

[hatashiro]

I'm thinking of working on this. Will upload a PR in a while!

[saavor]

I was able to find the error but not where it was coming from because vue has a warn() function and the errors always link to that instead of where the error is coming from.

[saavor]

Ok, so it's not working because of the browser by default setting the tag names to lowercase but vue is still looking for the elements with the upper case letters resulting in it not working

and here is proof: https://jsfiddle.net/e2yxoomh/50/

you just need to replace
Vue.component("MapView"
with
Vue.component("Mapview"
everything else can stay the same

[Zelig880]

Hi guys, is there anything needed for this Issue? It has bee open for over a year.

I can work on it if you want too.