Suppose that I want to support the following elements:

1. Valid: <one attribute-one="1"></one>
2. Valid: <two attribute-two="2"></two>
3. Invalid: <one attribute-two="2"></one>
4. Invalid: <two attribute-one="1"></two>

I can get close with this:

{
  ADD_TAGS: ['one', 'two'],
  ADD_ATTR: ['attribute-one', 'attribute-two']
}

This would allow my valid examples to pass, but it would also allow my invalid examples to pass, because ADD_ATTR creates a flat list of allowed attributes that apply to all tags in ADD_TAGS.

I propose to allow ADD_ATTR to accept a function:

{
  ADD_TAGS: ['one', 'two'],
  ADD_ATTR: (attributeName, tagName) => {
    const allowedAttributes = {
      'one': ['attribute-one'],
      'two': ['attribute-two']
    };
    return allowedAttributes[tagName]?.includes(attributeName) || false;
  }
}

This would properly reject the invalid examples while allowing the valid ones.

In #1093, I proposed a solution for this that was specific to custom elements (who's tagname must contain a - character). This is a variation on that idea.