Error when using x-for to generate SVG elements #637

Activity

1. allmarkedup commented on Jul 7, 2020

   

   allmarkedup

   on Jul 7, 2020

   Last edited by allmarkedup

   Contributor

   More actions

   FWIW I suspect this is not an Alpine issue - if you are using HTML tags (like template) inside an SVG element they will have an SVG namespace so HTML elements like HTMLTemplateElement won't be implemented by the browser. I ran into something similar a while back trying to use vanilla JS and templates in SVG elements.

   Edit: Sounds like Polymer ran into something similar and there is now a WHATWG feature request open to provide support: whatwg/html#3563 - not much help in the short term though.

   👍React with 👍1Reacted by amri
2. SimoTod commented on Jul 7, 2020

   

   SimoTod

   on Jul 7, 2020

   Last edited by SimoTod

   Collaborator

   More actions

   Yeah, it's a DOM issue. templates inside an svg tag are not implemented and they miss the content property (you can see it using the inspector without alpine).

   You need to include a polyfil like the one below (adapted from one mentioned on the polymer issue)

   (function(){ 
     var templates = document.querySelectorAll('svg template');
     var el, template, attribs, attrib, count, child, content;
     for (var i=0; i<templates.length; i++) {
       el = templates[i];
       template = el.ownerDocument.createElement('template');
       el.parentNode.insertBefore(template, el);
       attribs = el.attributes;
       count = attribs.length;
       while (count-- > 0) {
         attrib = attribs[count];
         template.setAttribute(attrib.name, attrib.value);
         el.removeAttribute(attrib.name);
       }
       el.parentNode.removeChild(el);
       content = template.content;
       while ((child = el.firstChild)) {
         content.appendChild(child);
       }
     }
   })();
   

   👍React with 👍9Reacted by Mark Perkins, Hugo Locurcio, Daniel Sturm, Its me VOID, René, Ostap Brehin, sherwyn, Florent Genette and Ollie Charles

   ❤️React with ❤️4Reacted by Hugo Locurcio, Its me VOID, Ostap Brehin and sherwyn
3. Calinou commented on Jul 7, 2020

   

   Calinou

   on Jul 7, 2020

   Last edited by Calinou

   ContributorAuthor

   More actions

   @SimoTod That polyfill seems to be working (tested in Firefox and Chromium). Thanks a lot 🙂
4. SimoTod commented on Jul 7, 2020

   

   SimoTod

   on Jul 7, 2020

   Collaborator

   More actions

   No worries. Make sure you test it on all browsers you support (IE11, old edge, Safari, etc). It should work but I did not check. 👍
5. Calinou

   added a commit that references this issue on Jul 7, 2020

   Document how to use `template` in `svg` elements using a polyfill

   ...

   This issue will close once commit 488c649 is merged into the 'master' branch.

   488c649
6. HugoDF

   added

   documentationImprovements or additions to documentationImprovements or additions to documentation

   on Jul 7, 2020
7. Calinou

   added 2 commits that reference this issue on Jul 16, 2020

   Document how to use `template` in `svg` elements using a polyfill

   ...

   This issue will close once commit 05e595f is merged into the 'master' branch.

   05e595f

   Document how to use `template` in `svg` elements using a polyfill

   ...

   This issue will close once commit 6586fcb is merged into the 'master' branch.

   6586fcb
8. calebporzio

   closed this as completedin #638on Jul 31, 2020
9. Corkle commented on Dec 19, 2020

   

   Corkle

   on Dec 19, 2020

   More actions

   I'm curious why x-for is only supported on template tags. Is this due to a technical limitation? It would be nice to be able to use it on other tag types that are supported within svg.
10. Calinou commented on Dec 19, 2020

    

    Calinou

    on Dec 19, 2020

    Last edited by Calinou

    ContributorAuthor

    More actions

    Is this due to a technical limitation?

    Yes, Alpine.js doesn't use a virtual DOM which means you can only use x-for on template tags.
11. HugoDF commented on Dec 20, 2020

    

    HugoDF

    on Dec 20, 2020

    Last edited by HugoDF

    Contributor

    More actions

    Is this due to a technical limitation?

    Yes, Alpine.js doesn't use a virtual DOM which means you can only use x-for on template tags.

    Hmmm I don't think it's strictly VDOM vs not, I think it's a trade-off (admittedly partly due to no VDOM). You probably could have an x-for without template but you would need to hide the relevant Nodes/elements until x-for has run. The big benefits of template is that by default it doesn't show visually and is easy to use to generate DOM Nodes.
12. ocharles commented on May 21, 2022

    

    ocharles

    on May 21, 2022

    Last edited by ocharles

    More actions

    Edit: sorry, you can ignore this comment. I was applying the polyfill too early.

    Here's an updated example that works:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rectangle Editor</title>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@2.4.1/dist/alpine.js"></script>
    </head>
    <body>
        <div x-data="rectangleEditor()">
            <svg width="1024" height="1024">
                <!-- Error -->
                <template x-for="rectangle in rectangles" :key="rectangle">
                    <rect :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height" />
                </template>
            </svg>
            <!-- No error -->
            <template x-for="rectangle in rectangles" :key="rectangle">
                <div :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height" />
            </template>
        </div>
    
        <script>
            function rectangleEditor() {
                return {
                    rectangles: [
                        { x: 20, y: 40, width: 200, height: 400 },
                        { x: 60, y: 100, width: 500, height: 500 },
                        { x: 200, y: 40, width: 100, height: 400 },
                        { x: 300, y: 40, width: 100, height: 400 },
                    ],
                }
            };
    
          (function(){
            var templates = document.querySelectorAll('svg template');
            var el, template, attribs, attrib, count, child, content;
            for (var i=0; i<templates.length; i++) {
              el = templates[i];
              template = el.ownerDocument.createElement('template');
              el.parentNode.insertBefore(template, el);
              attribs = el.attributes;
              count = attribs.length;
              while (count-- > 0) {
                attrib = attribs[count];
                template.setAttribute(attrib.name, attrib.value);
                el.removeAttribute(attrib.name);
              }
              el.parentNode.removeChild(el);
              content = template.content;
              while ((child = el.firstChild)) {
                content.appendChild(child);
              }
            }
          })();
        </script>
    </body>
    </html>

    For posterity, here's my original comment:

    Details

    Can anyone supply a small example page using `x-for` with `svg` and the latest Alpine? With the polyfill above, I still get errors.

    This is what I'm trying at the moment:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rectangle Editor</title>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@2.4.1/dist/alpine.js"></script>
        <script>
          (function(){
            var templates = document.querySelectorAll('svg template');
            var el, template, attribs, attrib, count, child, content;
            for (var i=0; i<templates.length; i++) {
              el = templates[i];
              template = el.ownerDocument.createElement('template');
              el.parentNode.insertBefore(template, el);
              attribs = el.attributes;
              count = attribs.length;
              while (count-- > 0) {
                attrib = attribs[count];
                template.setAttribute(attrib.name, attrib.value);
                el.removeAttribute(attrib.name);
              }
              el.parentNode.removeChild(el);
              content = template.content;
              while ((child = el.firstChild)) {
                content.appendChild(child);
              }
            }
          })();
        </script>
    </head>
    <body>
        <div x-data="rectangleEditor()">
            <svg width="1024" height="1024">
                <!-- Error -->
                <template x-for="rectangle in rectangles" :key="rectangle">
                    <rect :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height" />
                </template>
            </svg>
            <!-- No error -->
            <template x-for="rectangle in rectangles" :key="rectangle">
                <div :x="rectangle.x" :y="rectangle.y" :width="rectangle.width" :height="rectangle.height" />
            </template>
        </div>
    
        <script>
            function rectangleEditor() {
                return {
                    rectangles: [
                        { x: 20, y: 40, width: 200, height: 400 },
                        { x: 60, y: 100, width: 500, height: 500 },
                        { x: 200, y: 40, width: 100, height: 400 },
                        { x: 300, y: 40, width: 100, height: 400 },
                    ],
                }
            };
        </script>
    </body>
    </html>

    👍React with 👍1Reacted by Karim Kanso
13. flytreeleft commented on May 1, 2026

    

    flytreeleft

    on May 1, 2026

    More actions

    Actually, if you are using Vite, the <template/> in <svg/> will cause [vite] Internal server error: Cannot read properties of undefined (reading 'nodeName').

    To avoid this error, you can add a namespace to the template tag (example <x:template/>), then change your initialization code as following (based on #3944):

    document.addEventListener('DOMContentLoaded', () => {
      recreateTemplateInSvg(document);
    });
    
    function recreateTemplateInSvg(node) {
      node.querySelectorAll('svg x\\:template').forEach((el) => {
        const template = el.ownerDocument.createElement('template');
    
        for (const attr of el.attributes) {
          template.setAttributeNode(attr.cloneNode());
        }
        template.content.append(...el.children);
    
        el.replaceWith(template);
      });
    
      node.querySelectorAll('template').forEach((el) => {
        recreateTemplateInSvg(el.content);
      });
    }

    If your <svg/> is nested in <template/>, you should call recreateTemplateInSvg recursively with the content of <template/> node, because querySelectorAll will not match the elements which are in <template/>.