• Cs B
  • NEWBIE
  • 0 Points
  • Member since 2019

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies

I am facing some problem in traversing lightning proxy dom. 

Requirement: To change the lightning icon (SVG use path) when lightning components render as in below lightning icon  Dom screen-shot:

User-added image

Here, I am using lightning approval icon and it generates "approval" id when it renders in the browser by default.
So, I have to access this SVG part of Dom id="approval"  which I am unable to do so with below code.
Couple of below scenarios I used to get this:

1) Component.find()- I tried with the component.find("approval") but it gives undefined as it requires aura:id, which is not my case- as I have to find this dom component in the controller by this "approval" id only.
2) Jquery-I used Jquery to traverse dom but no luck.
3) component.getElements()- This gives proxy dom component(Locker Service) and values of this SVG are coming when I am debugging it as in the last screen-shot, but I am unable to traverse this Dom after.
   

Could you please help me with this and tell me an easy way to do that?

Component Code:
<aura:component >
    <ltng:require scripts="{!$Resource.jQuery + '/jquery.js'}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />:
    <div  id="test">
        <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
    </div>
</aura:component>

Controller :
({
 doInit : function(component, event, helper) {
var svg = component.find('approval');
        console.log('i am in doinit');
        console.log(svg);
        //var elements = document.getElementsByClassName("slds-icon-action-approval");
         //console.log(elements);
},
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(
     function()
     {
         //console.log(document.getElementById("sumit"));
     }
        );
         //console.log($( '#test'));

},
})
AfterRender:
({
    afterRender  : function(component,helper){
        component.superAfterRender();
     var svg=component.getElements();
        console.log('i am in afterrender');
        console.log(svg);
        //console.log(elements);
        
         
        }
    
})


User-added image


Thanks in Advance!!