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>
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<string, ValueRule>
"disallowAttrs"?: (string | Attr)[] | Record<string, ValueRule>
"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 | | 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 | | 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 | | 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'>"
}
}
]
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 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.