Fix attributeChangedCallback when calling setValidity

[Yavanosta]

Context

Polyfill works differently than native implementation because it is limited by browser capabilities. Specifically polyfill lacks special interaction of ElementInternals with a11y tools (like screen readers).

Native ElementInternals reports validity status to screen readers without using aria-* attributes (specifically aria-invalid).

In comparison to other attribute modification methods (removeAttribute and toggleAttribute), setAttribute always triggers attributeChangedCallback even if the actual value has not changed.

Problem

In my code I call setValidity from attribute changed callback. My component's validation relies on attributes, so when they have changed it makes sense to revalidate it.

Simplifying I can illustrate the problem with the following code:

class MyComponent extends HTMLElement {
  // ...
  attributeChangedCallback() {
    this.internals.setValidity(this.validate(), 'error message');
  }
  
  private validate() {
    const maxLength = Number(this.getAttribute('max-length'))
    return {tooLong: (this.value.length > maxLength)}
  }
  // ...
}
<my-component max-length="50" value="hello"></my-component>

This approach works perfect with a native ElementInternals but with polyfill it resolves into infinite loop. Every call to setValidity has ref.setAttribute('aria-invalid', `${!valid}`) inside which triggers another attributeChangedCallback and so on.

While it is easy to fix the problem in my code (i can filter which attributes will trigger revalidation) I think it worth it to fix the library as well.

It took me quite some time to find this bug because it only reproducible with the polyfill and the root cause is behaviour difference between Polyfill and native implementation. I absolutely did not expect ElementInternals to trigger attributeChangedCallback.

While I understand the need to do that, I think with this additional check we can limit the impact of this difference and at least avoid infinite loops.