# The “name” attribute is never allowed on the “X” element.

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

The validator warns about a `name` attribute on a custom element, any element whose name contains a hyphen, because it only expects `name` on a short list of built-in HTML elements.

The validator checks `name` against a fixed list: `button`, `details`, `fieldset`, `form`, `iframe`, `input`, `map`, `meta`, `object`, `output`, `select`, `slot` and `textarea`. It makes no exception for custom elements. HTML itself is more permissive here: an autonomous custom element may carry any attribute without a namespace that its author gives a meaning to, which is why the message is a warning and not an error.

The attribute usually comes from a Web Component that reads data such as a person's name from `name`, or from a framework component written straight into the page's HTML, such as a Vue component in an in-DOM template. In the second case the browser parses the markup before the framework compiles it, so a `name` prop reaches the validator as a plain attribute.

One kind of custom element does use `name` the way HTML defines it. A form-associated custom element, whose class sets `static formAssociated = true` and reports its value through `ElementInternals`, takes part in forms like an `input` does, and the HTML standard lists `name` as its attribute for form submission and the form's `elements` API. The validator doesn't run your scripts, so it can't tell such an element apart from any other. If the element is form-associated, keep `name` and mute the warning in your reports.

For any other custom element, rename the attribute to one that HTML doesn't reserve, such as `person-name` or `data-name`, and update the code that reads it: the `getAttribute()` calls and `observedAttributes` list of a Web Component, or the prop declaration of a framework component.

## Invalid example

```html
<profile-card name="Ada Lovelace" job-title="Mathematician"></profile-card>

<script>
  customElements.define("profile-card", class extends HTMLElement {
    connectedCallback() {
      this.textContent = this.getAttribute("name") + ", " + this.getAttribute("job-title");
    }
  });
</script>
```

## Valid example

```html
<profile-card person-name="Ada Lovelace" job-title="Mathematician"></profile-card>

<script>
  customElements.define("profile-card", class extends HTMLElement {
    connectedCallback() {
      this.textContent = this.getAttribute("person-name") + ", " + this.getAttribute("job-title");
    }
  });
</script>
```