0

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"));

enter image description here

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?

0

LWCs use shadow DOM to keep their internals hidden from other components, regardless of namespace.

The official mechanism for handling cross-DOM communication is the Lightning Message Service. Note that this has limitations, such as not working in Community pages. You'll find this information linked from the reference at the bottom of the component description.

You need to figure out how to detect the split view actions (does it send a DOM event up the component hierarchy that you can catch?) then perhaps use LMS to generate a cross-DOM message that you then consume in your component.

Given that these aspects of the page are handled within the List View itself I doubt that there is a way to detect these actions and you need to consider an alternative approach.

If you are needing to adjust presentation based on the "real estate" your component has available, you can probably use the component's root element's getBoundingClientRect or width/height before you render anything into it. Or something like that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.