Lightning SVG causing error on rerender [duplicate]

Question

The c:svg element in the following code is causing an error on rerender

"rerender threw an error in 'markup://c:svg' [Cannot read property 'parentNode' of undefined] Failing descriptor: {markup://c:svg}"

The element is in code here:

<button onclick="{!c.favouriteProject}">
    <c:svg class="{!'button-icon' + (projectData.favourite ? ' favourite' : '')}" 
        xlinkHref="/resource/slds100/assets/icons/utility-sprite/svg/symbols.svg#favorite"
    />
    {!projectData.favourite}
</button>

projectData.favourite updates correctly, but causes the svg to need re-rendering as it is coloured by the favourite class. I am using a custom SVG component as described in a trailhead module somewhere, namely:

svg.cmp

<aura:component >
  <aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
  <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" />
  <aura:attribute name="ariaHidden" type="String" default="true" description="aria-hidden true or false. defaults to true" />
</aura:component>

With a custom renderer, svgRenderer.js:

({
    render: function(component, helper) {
        //grab attributes from the component markup
        var classname = component.get("v.class");
        var xlinkhref = component.get("v.xlinkHref");
        var ariaHidden = component.get("v.ariaHidden");

        //return an svg element w/ the attributes
        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute('class', classname);
        svg.setAttribute('aria-hidden', ariaHidden);
        svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>';
        return svg;
    }
})

I am at a loss to what is causing this error: can anyone explain?

Answer 1

There are a couple of issues here:

1. In your render code, you are not calling this.superRender(). See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_renderers.htm

2. use xlink:href is not supported on IE

3. You have a cross site scripting vulnerability. Please either set this attribute to private or use setAttribute instead of innerHTML and sanitize the href to make sure you control the scheme to not be javascript

4. What is your re-render logic like? (e.g. if someone changes the attribute then you probably want to load a new icon, but the current code doesn't do that)