Writing custom element metadata: Restricting element attributes

Similar to restricting content restricting attributes comes in a few different versions. To define what values attribute accept the attributes property is used, to define what attributes are required use requiredAttributes and to mark an attribute as deprecated use deprecatedAttributes.

Define attribute values

Assuming our <my-component> element has a duck attribute which can take the value huey, dewey or louie we can use the attributes property to define an enumerated list of allowed values:

{
  "my-component": {
    "flow": true,
    "attributes": {
      "duck": ["huey", "dewey", "louie"]
    }
  }
}

<my-component duck="dewey">...</my-component>
<my-component duck="flintheart">...</my-component>
error: Attribute "duck" has invalid value "flintheart" (attribute-allowed-values) at inline:2:21:
  1 | <my-component duck="dewey">...</my-component>
> 2 | <my-component duck="flintheart">...</my-component>
    |                     ^^^^^^^^^^


1 error found.

We can also specify regular expressions by surrounding the string with / (remember to escape special characters properly):

{
  "my-component": {
    "flow": true,
    "attributes": {
      "ducks": ["/\\d+/"]
    }
  }
}

<my-component ducks="3">...</my-component>
<my-component ducks="huey">...</my-component>
error: Attribute "ducks" has invalid value "huey" (attribute-allowed-values) at inline:2:22:
  1 | <my-component ducks="3">...</my-component>
> 2 | <my-component ducks="huey">...</my-component>
    |                      ^^^^


1 error found.

Tips

To force a boolean value similar to disabled, selected etc use an empty array []:

{
  "my-component": {
    "flow": true,
    "attributes": {
      "quacks": []
    }
  }
}

<my-component quacks>...</my-component>
<my-component quacks="duck">...</my-component>
error: Attribute "quacks" should omit value (attribute-boolean-style) at inline:2:15:
  1 | <my-component quacks>...</my-component>
> 2 | <my-component quacks="duck">...</my-component>
    |               ^^^^^^


error: Attribute "quacks" has invalid value "duck" (attribute-allowed-values) at inline:2:23:
  1 | <my-component quacks>...</my-component>
> 2 | <my-component quacks="duck">...</my-component>
    |                       ^^^^


2 errors found.

Define required attributes

To define a list of required attributes use requiredAttributes:

{
  "my-component": {
    "flow": true,
    "requiredAttributes": ["duck"]
  }
}

<my-component duck="dewey">...</my-component>
<my-component>...</my-component>
error: <my-component> is missing required "duck" attribute (element-required-attributes) at inline:2:2:
  1 | <my-component duck="dewey">...</my-component>
> 2 | <my-component>...</my-component>
    |  ^^^^^^^^^^^^


1 error found.

Deprecating attributes

Similar to required attribute we can use deprecatedAttributes to deprecate attributes:

{
  "my-component": {
    "flow": true,
    "deprecatedAttributes": ["duck"]
  }
}

<my-component duck="dewey">...</my-component>
<my-component>...</my-component>
error: Attribute "duck" is deprecated on <my-component> element (no-deprecated-attr) at inline:1:15:
> 1 | <my-component duck="dewey">...</my-component>
    |               ^^^^
  2 | <my-component>...</my-component>


1 error found.