[Pivots] attributeChangedCallback should handle reflected properties

[nolanlawson]

Description

(This only applies to pivots (#2724).)

Pivots implement their own patch for attributeChangeCallback and observedAttributes, by overriding setAttribute/removeAttribute. But this doesn't handle Element properties that reflect to/from attributes, such as ariaLabel:

customElements.define('x-foo', class extends HTMLElement {
    static observedAttributes = ['aria-label']
    attributeChangedCallback(name, old, updated) {
      console.log('attribute changed')
    }
})

const elm = document.createElement('x-foo')
elm.ariaLabel = 'bar' // triggers attributeChangedCallback

Note that this only applies to custom elements whose tag names conflict with another custom element. Non-conflicting custom elements don't override any native attribute behavior.

[git2gus]

This issue has been linked to a new work item: W-11585211

[nolanlawson]

Pivots were dropped in #3310

[caridy]

@nolanlawson just curious here, if the UA supports such reflections, why would this not work as expected then? cc @rwaldron

[nolanlawson]

@caridy We override setAttribute/removeAttribute/getAttribute, but we don't override the getter/setter on e.g. ariaLabel.

So I believe doing elm.ariaLabel = 'foo' on an element with static observedAttributes = ['aria-label'] would work in native but not with our pivots implementation.

[caridy]

oh, I see... it is not really about aria, the same happens for elm.title = newTitle. Got it. I think we can still try to cover that, but seems very difficult to do it. We can chat more about it. cc @rwaldron

[nolanlawson]

Yes, good point. Also id, value, etc.