[lit-html][custom elements v1 polyfill] attributeChangedCallback is called twice via setAttributeNS
Root Cause
setAttributeNS() in custom elements v1 polyfill calls attributeChangedCallback
MutationObserver by polyfill() class mixin in polyfill.js handles changes in attributes and calls attributeChangedCallback in addition to setAttributeNS()
Fix
Polyfill setAttributeNS() as well as the currently polyfilled setAttribute() to avoid redundant calls to attributeChangedCallback
Note
Since the namespace parameter is the constant http://www.w3.org/1999/xhtml and usually omitted in HTML, it should not be integral to support setAttributeNS
In SVG, MathML, and XML, whose namespaces are different, custom elements are not supported.
With the native custom elements, the issue is not reproducible since polyfill() does nothing and setAttributeNS() is not polyfilled.
Ad-hoc Workaround
Polyfill setAttributeNS() for custom elements
setAttributeNS(namespace, name, value) {
if (!namespace || namespace === 'http://www.w3.org/1999/xhtml') {
this.setAttribute(name, value);
}
else {
super.setAttributeNS(namespace, name, value); // should not be called
}
}
[lit-html][custom elements v1 polyfill]
attributeChangedCallback
is called twice viasetAttributeNS
Root Cause
setAttributeNS()
in custom elements v1 polyfill callsattributeChangedCallback
MutationObserver
bypolyfill()
class mixin inpolyfill.js
handles changes in attributes and callsattributeChangedCallback
in addition tosetAttributeNS()
Fix
setAttributeNS()
as well as the currently polyfilledsetAttribute()
to avoid redundant calls toattributeChangedCallback
Note
namespace
parameter is the constanthttp://www.w3.org/1999/xhtml
and usually omitted in HTML, it should not be integral to supportsetAttributeNS
polyfill()
does nothing andsetAttributeNS()
is not polyfilled.Ad-hoc Workaround
setAttributeNS()
for custom elements