vue
vue copied to clipboard
Creating a component named map should warn the user (as with button)
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.
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
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/
it does work, you need to use map-view
beacuse in browser you cannot use uppercase for element names
Hmm ok. Well, it seems uppercase works for the first character.
- Foobar => Works
- FooBar => Doesn't work
You should checkout the style guide section of the docs, it will help you with that 🙂
Ok, thanks. In any case, some warnings would be useful. I wasted quite a few hours trying to figure out what was wrong.
@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
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>
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
:
I'm thinking of working on this. Will upload a PR in a while!
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.
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
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.
Seems intresting. Think to work on it
is there anything needed for this issuse?
Hmm ok. Well, it seems uppercase works for the first character.
- Foobar => Works
- FooBar => Doesn't work
Yeah the first Letter should be uppercase