`invalid-attr`

Warn if an attribute is a non-existent attribute or an invalid type value due to the specifications (or the custom rule).

This rule according to HTML Living Standard. It has settings in @markuplint/html-spec.

❌ Examples of incorrect code for this rule

<div unexist-attr>
  <button tabindex="non-integer">The Button</button>
  <a href="/" referrerpolicy="invalid-value">The Anchor</a>
</div>

✅ Examples of correct code for this rule

<div>
  <button tabindex="0">The Button</button>
  <a href="/" referrerpolicy="no-referrer">The Anchor</a>
</div>

note

This rule doesn't evaluate the element that has the spread attribute in some condition. For example, it disallows to set the target attribute to the a element that doesn't have the href attribute, but markuplint can't evaluate because doesn't know whether the spread attribute includes the href property.

const Component = (props) => {
  return <a target="_blank" {...props}>;
}

Interface

{
  "invalid-attr": boolean
}

Options

{
  "invalid-attr": {
    "options": {
      "allowAttrs"?: (string | Attr)[] | Record&lt;string, ValueRule&gt;
      "disallowAttrs"?: (string | Attr)[] | Record&lt;string, ValueRule&gt;
      "ignoreAttrNamePrefix"?: string | string[]
      "allowToAddPropertiesForPretender"?: boolean
      "attrs"?: Object
    }
  }
}

type Attr = {
  name: string;
  value: AttributeType | ValueRule;
}

type ValueRule =
  | { enum: [string, ...string[]]; }
  | { pattern: string; }
  | { type: AttributeType; };

AttributeType is The type API.

Property	Type	Default Value	Description
`allowAttrs`	`(string \| Attr)[] \| Record<string, ValueRule>`	`undefined`	Specify the attributes to allow. This is useful when you want to intentionally specify attributes not present in the HTML Standard or when you want to avoid warnings for attributes required by frameworks. You can specify the attribute name only or provide patterns and data types for attribute values.
`disallowAttrs`	`(string \| Attr)[] \| Record<string, ValueRule>`	`undefined`	Specify the attributes to disallow. Even if they are allowed in the HTML Standard, you can use this option to intentionally prohibit them based on your project's rules. The format for specifying disallowed attributes is the same as for `allowAttrs`, but the meanings are reversed.
`ignoreAttrNamePrefix`	`string \| string[]`	`undefined`	Set prefixes to exclude special attributes or directives for the library and template engine that do not exist in the HTML specifications.
`allowToAddPropertiesForPretender`	`boolean`	`"true"`	Allow adding properties for a component that pretends to be an HTML native element. The default is `true`. It warns of finding a non-existence attribute if it is set `false` and you use the `pretenders` option.
`attrs`	`Object`	`undefined`	[Deprecated (since v3.7.0): Use `allowAttrs` or `disallowAttrs` instead.] Setting custom rule. Set either `enum`, `pattern`, `type` or `disallowed`.

Default Severity

error

Details

Setting `allowAttrs` option

It accepts an array or an object.

Array format

The array can contain elements of both string and object types.

For strings, you can specify allowed attribute names, with attribute values being unrestricted. In the case of Objects, they should have both name and value properties, allowing you to specify more precise constraints for the attribute values.

{
  "invalid-attr": {
    "options": {
      "allowAttrs": [
        "x-attr",
        {
          "name": "x-attr2",
          "value": "Int"
        },
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

You can use the types defined in The types API for the value property. Additionally, you can specify an enum property to limit the allowed values or use the pattern property to define a pattern for the values using regular expressions.

You can also specify The types API using an Object type with a type property. This is just an alias with a different syntax but conveys the same meaning.

[
  {
    "name": "x-attr",
    "value": "<'color-profile'>"
  },
  // The above and below are equivalent
  {
    "name": "x-attr",
    "value": {
      "type": "<'color-profile'>"
    }
  }
]

caution

In case of duplicate attribute names within the array, the one specified later will take precedence.

Object format

The Object format follows the same structure as the deprecated attrs property. It accepts objects with property names corresponding to attribute names and with object includes type, enum, and pattern properties. These properties have the same meaning as described earlier in the Array format.

note

Note that objects with the disallow property are not accepted. Instead, please use the newly introduced disallowAttrs option, which will be discussed in the following section.

{
  "invalid-attr": {
    "options": {
      "allowAttrs": {
        "x-attr": {
          "type": "Any"
        },
        "x-attr2": {
          "type": "Int"
        },
        "x-attr3": {
          "enum": ["apple", "orange"]
        },
        "x-attr4": {
          "pattern": "/^[a-z]+$/"
        }
      }
    }
  }
}

Setting `disallowAttrs` option

The format for specifying disallowed attributes is the same as for allowAttrs, but the meanings are reversed.

{
  "invalid-attr": {
    "options": {
      "disallowAttrs": [
        // Disallow `x-attr` attribute.
        "x-attr",

        // Disallow `x-attr2` attribute when the value is an integer.
        // If the value is not an integer, the attribute itself is allowed.
        {
          "name": "x-attr2",
          "value": "Int"
        },

        // Disallow `x-attr3` attribute when the value is "apple" or "orange".
        // If the value is not "apple" and "orange", the attribute itself is allowed.
        {
          "name": "x-attr3",
          "value": {
            "enum": ["apple", "orange"]
          }
        },

        // Disallow `x-attr4` attribute when the value matches the pattern.
        // If the value doesn't match the pattern, the attribute itself is allowed.
        {
          "name": "x-attr4",
          "value": {
            "pattern": "/^[a-z]+$/"
          }
        }
      ]
    }
  }
}

Setting `attrs` option

This option is deprecated since v3.7.0.

Details of this option

`enum`

Only values that match the enumerated strings are allowed.

Type: string[]

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "enum": ["value1", "value2", "value3"]
        }
      }
    }
  }
}

`pattern`

Only allow values that match the pattern. It works as a regular expression by enclosing it in /.

Type: string

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "pattern": "/[a-z]+/"
        }
      }
    }
  }
}

`type`

Only values that match the specified type are allowed.

Type: string

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "type": "Boolean"
        }
      }
    }
  }
}

`disallowed`

Disallow the attribute.

Type: boolean

{
  "invalid-attr": {
    "options": {
      "attrs": {
        "x-attr": {
          "disallowed": true
        }
      }
    }
  }
}

Setting `ignoreAttrNamePrefix` option

{
  "invalid-attr": {
    "options": {
      "ignoreAttrNamePrefix": [
        // If Angular
        "app",
        "*ng"
      ]
    }
  }
}

In some parser, detect an attribute as a directive so ignored. (Ex: Ignore directive that starts v- string in the vue-parser.)

Configuration Example

The Open Graph protocol and RDFa are specifications that are different from the HTML Standard. So you should specify it manually as follow if you need it:

The Open Graph protocol

{
  "nodeRules": [
    {
      "selector": "meta[property]",
      "rules": {
        "invalid-attr": {
          "options": {
            "allowAttrs": ["property", "content"]
          }
        }
      }
    }
  ]
}

RDFa (RDFa lite)

{
  "rules": {
    "invalid-attr": {
      "options": {
        "allowAttrs": [
          {
            "name": "vocab",
            "value": "URL"
          },
          "typeof",
          "property",
          "resource",
          "prefix"
        ]
      }
    }
  }
}

We recommend you use Microdata instead of RDFa if you need structured data.

Interface​

Options​

Default Severity​

Details​

Setting allowAttrs option​

Array format​

Object format​

Setting disallowAttrs option​

Setting attrs option​

enum​

pattern​

type​

disallowed​

Setting ignoreAttrNamePrefix option​

Configuration Example​

The Open Graph protocol​

RDFa (RDFa lite)​