HTML Guides for custom element

A Vue template left in the page's HTML puts a name attribute on <transition-group>, and the validator warns because name only has a meaning on a short list of HTML elements.

Vue's <TransitionGroup> component animates items as they are added to or removed from a list. Its name prop sets the prefix of the CSS classes Vue applies during the animation, so name="fade" gives you fade-enter-active, fade-leave-to and so on. When Vue mounts onto markup that is already in the page (an in-DOM template, common when Vue is loaded from a CDN without a build step), the browser parses that markup first, and the validator checks it before Vue has compiled anything.

To an HTML parser, transition-group is an autonomous custom element, because its name contains a hyphen. HTML lets custom elements carry any attribute without a namespace, which is why this is a warning and not an error. The validator still reports name on every element outside the ones where HTML defines it: button, details, fieldset, form, iframe, input, map, meta, object, output, select, slot and textarea.

To clear the warning, keep Vue's template syntax out of the HTML the validator checks. With a build step, write the component as a single-file component (.vue), so the page only contains the rendered output. Without one, move the template into a <script type="text/x-template"> element and point the app's template option at its id. The validator doesn't check markup inside a script element, and Vue compiles the template the same way.

Because HTML permits the attribute on custom elements, keeping the in-DOM template and muting this warning in your reports is also a reasonable choice.

Invalid example

<div id="app">

<transition-group name="fade" tag="div">

<p>New message</p>

</transition-group>

</div>

Valid example

<div id="app"></div>

<script type="text/x-template" id="app-template">

<transition-group name="fade" tag="div">

<p>New message</p>

</transition-group>

</script>

<script>

Vue.createApp({ template: "#app-template" }).mount("#app");

</script>