Skip to content

Update attributeNameCheck to include tagName #1093

@nelstrom

Description

@nelstrom

Suppose that I want to support the following custom elements:

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

I can get close with this:

{
  CUSTOM_ELEMENT_HANDLING: {
    tagNameCheck: (tagName) => tagName.match(/^element-(one|two)$/),
    attributeNameCheck: (attr) => attr.match(/^attribute-(one|two)$/),
    allowCustomizedBuiltInElements: false,
  },
}

This would allow my valid examples to pass, but it would also allow my invalid examples to pass.

If the function signature of the attributeNameCheck could receive a second argument, representing the tagName, then the configuration could be defined as follows:

{
  CUSTOM_ELEMENT_HANDLING: {
    tagNameCheck: (tagName) => tagName.match(/^element-(one|two)$/),
    attributeNameCheck: (attr, tagName) => {
      if (tagName === 'element-one') {
        return ['attribute-one'].includes(attr);
      } else if (tagName === 'element-two') {
        return ['attribute-two'].includes(attr);
      } else {
        return false;
      }
    },
    allowCustomizedBuiltInElements: false,
  },
}

Is this potentially a feature that you'd be willing to support? Are there any security concerns or performance concerns that would make this unacceptable?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions