Apex Code Development You need to sign in to do that
Don't have an account?
Alex Packard 5 Spring 21 Shadow DOM Problem
In Spring 21 it appears that the Node.getRootNode() function is returning undefined instead of the proper behavior, which is to return the ShadowRoot. (see https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
Here is a simple component that reproduces the issue:
Component
Renderer
Interestingly, it does seem behave correctly inside the Lightning App Builder preview window. It only returns undefined when you load the actual lightning app/page.
This is causing some big problems for us. Chart.js relies on this method to behave as defined in the spec and returning undefined breaks it.
Has anyone else seen this? Will this be fixed before Spring 21 is officially released?
Here is a simple component that reproduces the issue:
Component
<aura:component implements="flexipage:availableForAllPageTypes" access="global"> <div id="rooty" aura:id="rooty"/> </aura:component>
Renderer
({
afterRender : function(component, helper) {
console.log('root node:');
console.log(component.find('rooty').getElement().getRootNode());
}
})
Interestingly, it does seem behave correctly inside the Lightning App Builder preview window. It only returns undefined when you load the actual lightning app/page.
This is causing some big problems for us. Chart.js relies on this method to behave as defined in the spec and returning undefined breaks it.
Has anyone else seen this? Will this be fixed before Spring 21 is officially released?
>> Winter 21 org: Does not have Raptor Record Home(RRH) enabled. Load the page and notice where the div is in the dom tree. All the way up to the <body>, you will only notice standard HTML elements.
>> Spring 21 org: Has Raptor Record Home enabled. In other words, the record detail page is rendered using LWC components. So shadow semantics come into play. Notice where the <div id="rooty"> is in the dom tree. It will be underneath a flexipage-aura-wrapper. That is an LWC component. getRootNode() will stop at the shadow boundary of that lwc component. You will need to use getRootNode({composed: true}).
>>The Spring org's repro is a pure aura component. Notice in this case you are not using the component inside a record detail page, so RRH is not in play.
>>Users need to use getRootNode({composed: true}) in case if they are using the component in the record page since RRH is enabled in Spring 21 org.
Hope this answers your ask. If this information helps, please mark the answer as best.Thank you
All Answers
I tried to reproduce this behavior in Winter'21 org by adding the component in Lightning App and do not see any console.log statements in the browser. Am I missing something? Thanks
I will update this thread as I have more inputs.
I see that you have logged a case with salesforce support for this scenario which is currently being investigated. I have reached out to the experts' team already seeking inputs on this behaviour and waiting to hear back.
Appreciate your patience in the meantime.
Thank you
Swetha Maddali
Salesforce Support
Appreciate your patience while we were working on this issue. I have below inputs from our team:
"The getRootNode() is returning undefined because of the following reason:
In Lightning App builder(LWB) scenario, the component is embedded inside the flexipage wrapper which is an LWC component. Because of shadow dom semantics, the getRootNode() will return the nearest shadowRoot. Further, locker prevents access to shadowRoot nodes, hence you are receiving an undefined value.
In the case of Lightning App scenario, the component is not wrapped in an LWC component. It is in pure aura world, so not shadow semantics.
Further, this is not a regression in Spring 21. The behavior has remained same between the two releases. You can confirm the same behavior by switching the Winter 21 org to Lighting Experience and using the component on a record detail page via LAB
Resolution: Use getRootNode({composed: true}) . The composed flag will let you traverse the shadow boundaries and give you the same behavior as Lightning App.
Happy to answer any follow-up queries. Hope this helps you. Please mark this answer as best so that others facing the same issue will find this information useful. Thank you
Can you please communicate to the team that there IS a difference between winter 21 and spring 21. While there may not be a difference on a Record Page build via LAB, there is definitely a difference on an App Page built via LAB.
>> Winter 21 org: Does not have Raptor Record Home(RRH) enabled. Load the page and notice where the div is in the dom tree. All the way up to the <body>, you will only notice standard HTML elements.
>> Spring 21 org: Has Raptor Record Home enabled. In other words, the record detail page is rendered using LWC components. So shadow semantics come into play. Notice where the <div id="rooty"> is in the dom tree. It will be underneath a flexipage-aura-wrapper. That is an LWC component. getRootNode() will stop at the shadow boundary of that lwc component. You will need to use getRootNode({composed: true}).
>>The Spring org's repro is a pure aura component. Notice in this case you are not using the component inside a record detail page, so RRH is not in play.
>>Users need to use getRootNode({composed: true}) in case if they are using the component in the record page since RRH is enabled in Spring 21 org.
Hope this answers your ask. If this information helps, please mark the answer as best.Thank you