JavaScript shim to add support for suitably-namespaced XHTML2 elements in XHTML5 code (currently just <xhtml2:img>). Requires jQuery.

xhtml2shim.js

// Namespaces assumed:
// xmlns="http://www.w3.org/1999/xhtml"
// xmlns:xhtml2="http://www.w3.org/2002/06/xhtml2/"
// xmlns:ev="http://www.w3.org/2001/xml-events"

// By Thomas Hori, copyright 2017.  Zlib licence.

jQuery(function () { // Good practice to not assume $ at top level is jQuery (due to e.g. PrototypeJS).
    var $ = jQuery;
    ////////////////
    //// The <xhtml2:img> tag
    // <xhtml2:img> part 1: Changing any final-fallback <img> tags to <xhtml2:img> tags.
    // Necessary as innerText or textContent will not include the textual alt text otherwise.
    // <img> tags which are not within an <xhtml2:img> are unaffected.
    // TODO: currently the HTML5 <picture> element is assumed never to interact with
    // the <xhtml2:img> element in any way, should fix this at some point.
    $("xhtml2\\:img img").toArray().forEach(function (ht5img) {
        var xht2img = document.createElement("xhtml2:img");
        var attrs = ht5img.attributes;
        var i;
        for (i = 0; i < attrs.length; i += 1) {
            var j = attrs[i];
            if (j.name == "alt") {
                xht2img.appendChild(document.createTextNode(j.value));
            } else if (j.name == "id" || j.name == "xml:id") {
                saveid = j.value;
                // Hopefully this constitutes a unique ID
                // Only temporary before it's deleted anyway.
                ht5img.setAttribute(j.name, saveid + "41d0c9b7c5html5element")
                xht2img.setAttribute(j.name, saveid);
            } else {
                xht2img.setAttribute(j.name, j.value);
            }
        }
        ht5img.parentNode.insertBefore(xht2img, ht5img);
        ht5img.parentNode.removeChild(ht5img);
    });
    // <xhtml2:img> part 2: Converting outer-level <xhtml2:img> tags to <img> tags
    // and dropping to the next level in upon event of error.
    var fix_xht2imgs = function () {
        var sel = "xhtml2\\:img";
        // Don't select xhtml2:img inside another (handled later in the alt eventuality)
        $(sel).not(sel + " " + sel).toArray().forEach(function (xht2img) {
            var ht5img = document.createElement("img");
            // innerText would work best but textContent should suffice for this. Both only
            // work if the alt text isn't provided as an alt text on an HTML img at the core,
            // which it shouldn't be due to the above code changing those.
            ht5img.setAttribute("alt", xht2img.innerText || xht2img.textContent);
            $(ht5img).on("error", function (event) {
                // Parent function is a forEach callback specifically for that xht2img.
                // Therefore, the closures should be in our favour.
                if (ht5img.getAttribute("id")) {
                    var mydiv = document.createElement("div");
                    mydiv.setAttribute("id", ht5img.getAttribute("id"));
                    mydiv.style.display = "inline-block";
                    ht5img.parentNode.removeChild(ht5img);
                    xht2img.parentNode.insertBefore(mydiv, xht2img);
                    while (xht2img.childNodes.length) {
                        mydiv.appendChild(xht2img.firstChild);
                    }
                } else {
                    ht5img.parentNode.removeChild(ht5img);
                    while (xht2img.childNodes.length) {
                        xht2img.parentNode.insertBefore(xht2img.firstChild, xht2img);
                    }
                }
                xht2img.parentNode.removeChild(xht2img);
                fix_xht2imgs(); // Rerun fix to catch current top-level xhtml2:img tags
            });
            xht2img.parentNode.insertBefore(ht5img, xht2img);
            var attrs = jQuery.makeArray(xht2img.attributes);
            attrs.forEach(function (attr) {
                var saveid;
                if (attr.name == "src") {
                    // pass (must be done after everything else is in place, see below)
                } else if (attr.name == "id" || attr.name == "xml:id") {
                    saveid = attr.value;
                    // Hopefully this constitutes a unique ID
                    xht2img.setAttribute(attr.name, saveid + "41d0c9b7c5xhtml2element")
                    ht5img.setAttribute("id", saveid); // xml:id not part of HTML5
                } else {
                    ht5img.setAttribute(attr.name, attr.value);
                }
            })
            // Hide it in lieu of an HTML <img>, but not before style= has been copied
            xht2img.style.display = "none";
            ht5img.setAttribute("src", xht2img.getAttribute("src")); // must be last
        });
    };
    fix_xht2imgs();
});