P5.js: Consider Polyfills for consistent DOM API

[outofambit]

Inspiration

Inspired by https://github.com/processing/p5.js/pull/3609#issuecomment-474997508, I started looking into libraries that ensure we have a consistent DOM API across browsers (like https://github.com/WebReflection/dom4).

This would ensure we could use features like classList.toggle without worrying about dropping support for older browsers (ahem, IE11) and may let us rely a _little_ less on modernizr.

Compatibility

From the dom4 readme:

Theoretically compatible with all browsers you know that are truly used these days, here a list:

Android 2.1+
Safari Mobile since iOS 3.0 and Desktop
Opera Mobile, Mini, and Desktop
Blackberry 7.1 and higher
Samsung Bada 2 native Browser
Midori and most likely all other WebKit based
Chrome Mobile and Desktop
Firefox Mobile and Desktop
IE8+ for Desktop and IE Mobile 9 or greater.
Nokia Xpress Browser for ASHA Platform
Silk Browser - Fire OS 3.0
PhantomJS can benefit from DOM4 too

Size

The dom4 library is about 10KB minified.

Thoughts?

This is probably overkill but I thought it would be worth documenting my research just in case. :)

[lmccart]

I think this sounds on one hand, very convenient and nice to use. I'm not opposed to it at all, and it's not too big. On the other hand, I wonder with the limited scope of p5.dom, if it is more than we need, as you mention. Maybe a place to start would be to identify the list of key features that we don't currently have cross-browser support for and see how much work this saves.

[limzykenneth]

Do we need to include the polyfill into the library? If they are simply polyfills and the user wants to target soemthing as old as IE11 or older, can they just include a script tag to dom4 themselves? We can of course suggest this in one of the tutorials as well.

If targeting old browsers are not a requirement of the user necessarily there's no need to bloat out the library, even jQuery has dropped much of older browser's support with each major versions to streamline the library and reduce file size.

[lmccart]

Bumping this one. Are there other features that this polyfill would help significantly with? Otherwise, I think I'm in favor of leaving this out for size considerations and just avoiding use of features like classList.toggle that are not supported on recent major browsers.

[outofambit]

thanks for the bump @lmccart! I did some more research on this and I think there is only one existing DOM feature we use in p5 that would benefit from this.

ChildNode.remove isn't supported by IE11, which we use here:

https://github.com/processing/p5.js/blob/d4fc48251b731db108cb9c315660deab43035fbe/lib/addons/p5.dom.js#L240

I'm pretty sure this isn't worth adding https://github.com/WebReflection/dom4 to p5, so I'm going to close this, but anyone feel free to reopen if you disagree!