• Cs B
  • 0 Points
  • Member since 2019

  • Chatter
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
  • 1

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"/>

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

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

User-added image

Thanks in Advance!!