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

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

<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

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

Learn more:

MDN Reference

MDN Web Docs: Using custom elements

→

MDN Reference

MDN Web Docs: ElementInternals

→

WHATWG Spec

HTML Standard: Custom elements

→