When I am trying to view a record detail page in split view mode I have to alter CSS on my custom component depending on whether the Split view section is expanded or collapsed. In order to accomplish this I need to listen to one of the event actions on the standard toggle button in the split view section.
I tried using document.getElementById(), document.getElementsByTagName() and other methods of document object to access the DOM elements of the split view section but owing to the Lightning locker service we are not allowed to access DOM elements with different namespace. I do get a Proxy object in browser console and can see values in its Target but when trying to access it in the custom component it returns undefined thereby stopping my progress.
console.log(document.getElementById("sfdc-splitview-content")); console.log(document.getElementsByTagName("button")); console.log(document.getElementsByClassName("slds-split-view__toggle-button"));
So is there a way around to access elements outside the current component's DOM or listen to any event rendering from a different document?