# The “name” attribute is never allowed on the “transition-group” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-name-attribute-is-never-allowed-on-the-transition-group-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<div id="app">
  <transition-group name="fade" tag="div">
    <p>New message</p>
  </transition-group>
</div>
```

## Valid example

```html
<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>
```