It seems inevitable for me to fall into some browser compatibility trap from time to time. The last "blogpost worthy" one that I faced was fun, but still, it was traceable through the standard browser compatibility resources such as caniuse.com or MDN Web Docs browser compatibility tables.
Well, this time, MutationObserverInit.attributeFilter gave me a bit of a hard time.
While working in some implementation that requires me to detect when a DOM element is mutated, I did not blink an eye when it came to choosing the MutationObserver API to get the job done. But this time, I used something different, that was MutationObserverInit.attributeFilter.
The problem here is that the relevant browser compatibility information was not accurate for the usage of
attributeFilter, especially for Internet Explorer and Edge browsers. It happens that these browsers throw a syntax error upon the usage of this API without setting a flag, I won't bother you with the details, you can now check caniuse.com
attributeFilter compatibility information, you might find all the details about this issue there.
The point here is that we might be reaching soon (maybe a few years more) a more stable era of browsers with the discontinuation of IE and the Microsoft Edge big move on becoming a Chromium-based browser. In the meantime, we can all contribute to a compatible web. How can we individually help?
If you tick all the checkboxes ✅ in the previous list, you can go ahead and open a Pull Request on mdn/browser-compat-data; the mdn team, me, and all the community own you a big thanks for documenting the issue. Lastly, but most importantly, you'll be ensuring that no one has to go through all the pain to debug and figure out why the hell your application was breaking.
I did so, with the attributeFilter issue on the MutationObserverInit.attributeFilter API. Here's the final result where caniuse is displaying the information for users about the compatibility issue on the
If you liked this article, consider sharing (tweeting) it to your followers.