function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
David PicksleyDavid Picksley 

'Unload' static resource stylesheets when closing the component it is called from

We have a custom lightning component that takes advantage of an external stylesheet (stored in the static resources).

It is included with  
<ltng:require styles="{! $Resource.STYLESHEETNAMEHERE}"/>

My thinking is that the developer adds a sort of 'onExit' handler to unlink the file, but I can't find any documentation for unloading a static resource, or I could be completely wrong and it just be a caching issue

The issue is that some of the styles in that external resource are being carried over to other components that don't explicitly include the file
How can we tackle this?

A screen recording of the issue
  • Open a default modal (FINE)
  • Open a custom component that includes the CSS file named 'fullModalBypass.css'
  • Re-open the first modal, the modal contains the CSS file that was included in the component of the previous step
Best Answer chosen by David Picksley
Naveen KNNaveen KN
Hi David, I don't think we can unload the static resource from the DOM once it is loaded. try to see if you can do something in the renderer js file in the lightning component bundle. 

Naveen

All Answers

Naveen KNNaveen KN
Hi David, I don't think we can unload the static resource from the DOM once it is loaded. try to see if you can do something in the renderer js file in the lightning component bundle. 

Naveen
This was selected as the best answer
Stijn Vermeulen 3Stijn Vermeulen 3

For anyone running into the same problem. We have found a workaround. You can do the following:

In init function:
let styleSheet = document.createElement("style");
styleSheet.type = 'text/css';
styleSheet.innerText = 'body { background-color: red; }';
styleSheet.id = 'randomid';
document.head.appendChild(styleSheet);

On close function: 
let styleSheet = document.getElementById('randomid');
styleSheet.remove();