alpine-svg-templates.ts

/**
 * Re-creates all <template> tags within <svg> elements as "DOM" elements to overcome browser limitations.
 * This is necessary because HTML tags inside an SVG element have an SVG namespace, which may lack proper support.
 * https://github.com/whatwg/html/issues/3563
 * https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538
 */
const recreateTemplates = (templates: NodeListOf<Element>) => {
    let el: Element,
        template: HTMLTemplateElement,
        attrs: NamedNodeMap,
        attr: Attr,
        count: number,
        child: Node,
        content: DocumentFragment;

    for (let i = 0; i < templates.length; i++) {
        el = templates[i];
        template = el.ownerDocument.createElement('template');
        el.parentNode.insertBefore(template, el);

        attrs = el.attributes;
        count = attrs.length;

        while (count-- > 0) {
            attr = attrs[count];
            template.setAttribute(attr.name, attr.value);
            el.removeAttribute(attr.name);
        }

        el.parentNode!.removeChild(el);
        content = template.content;

        while ((child = el.firstChild!)) {
            content.appendChild(child);
        }
    }
}

document.addEventListener('alpine:init', () => {
    recreateTemplates(document.querySelectorAll('svg template'));
});