MutationObserver syntax error on IE 11

Question

I'm working with a MutationObserver to change the values of some variables when I switch the content of a panel (I'm useing Bootstrap tabs). Everything is working just fine in Chrome and Firefox, but for some reason, when I test it with IE, it shows a syntax error in the console and the script breaks. This is my MutationObserver code:

var observer = new MutationObserver(function (MutationRecords, MutationObserver) {
        dataTable = null;
        tabla = null;
        tabActiva = $('.tab-content').find('.active');
        formFiltro = tabActiva.find('form');
        tabla = tabActiva.find('table');
    });

    observer.observe(target, {
        childList: true,
        attributeFilter: ['class'],
        subtree: true
    });

Console points the error is on the observer.observe(). I don't know what's happening. Thanks in advance.

Just in case, this is my "target":

var target = $('.tab-content > .tab-pane').get(0);

Answer 1

With a MutationObserver, it's possible to filter attributes, but only if you are observing element attributes to begin with. Therefore the option attributeFilter is only applicable if attributes is set to true.

If you specify an attributeFilter without setting attributes to true, then IE11 will throw a syntax error, while Chrome and Firefox will just silently ignore attributeFilter.

To resolve the syntax error, either set attributes to true or remove the attributeFilter.

Answer 2

1. According to MDN, if attributeFilter property is specified,

there's no need to also set attributes to true, as it's implied.

2. DOM Living Standard specification defines attributeFilter as

Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted.

---

• Looks like that's not the case for IE11 - it does not comply with the specification.
• workaround for IE11: to set attributeFilter set also attributes: true.