Dynamic inserted content

[tditlu]

What do you think about implementing some kind of observer to apply the polyfill after dynamic inserted content, e.g.:

  var objectFitPolyfill = function(media, recursive) {
    if (!recursive) {
      (function(media) {
        var body = document.body;
        if (window.MutationObserver) {
            var observer = new MutationObserver(function() {
              objectFitPolyfill(media, true);
            });
            observer.observe(body, { childList:true, subtree:true });
        } else if (window.addEventListener) {
          body.addEventListener('DOMNodeInserted', function() { objectFitPolyfill(media, true); }, false);
          body.addEventListener('DOMNodeRemoved', function() { objectFitPolyfill(media, true); }, false);
        }
      })(media);
    }

...

[cee-chen]

It's a great idea and I generally love mutation observers way (more than I do listening for window events like resizing)!

Unfortunately however, one of the goals of the polyfill is to support at least IE9, so that would require polyfilling MutationObserver for IE9/10, and polyfilling within a polyfill sounds like a dark road to insanity. My preference is generally that polyfills/modules limit themselves to one concern at a time and leave more intricate edge-cases to the developer to implement as-needed, and dynamic content such as carousels, lazy-loading, etc. is one of those scenarios to me.

I definitely encourage devs looking to implement such functionality to pull inspiration from your excellent code snippet however!

[tditlu]

IE9 support is handled by the ’DOMNodeInserted’ event, but must of course be tested. Maybe it’s better to do a new package that extends your pollyfill with this functionality