Recently, I was exploring embedding lightning components inside a customised Service Cloud console Visualforce page. I began with the mindset that to achieve this was a straight forward process using lightning out and little bit of Javascript. I quickly realised with the complexities around this application, the level of customisation and the in-depth CSS styles, it made it almost impossible to do so without the inheritance of a spaghetti of CSS styles and Javascript overrides.

I began exploring the idea of instantiating a Lightning component within an isolated Visualforce page embedded in a parent Visualforce page (using an iframe). The implementation of this was very straight forward but presented complexities around communication between the Lightning component and the top level Visualforce page. A best practice in web-development (and a philosophy of the Lightning framework – think about LockerService) is to employ proper separation and isolation of logic and presentation for the purposes of maintainability, readability and security. For this POC, it was important to stick to the ‘modular’ philosophy by creating a proxy layer of communication between the Lightning component and the top level Visualforce page.

I was able to successfully create a proxy page for loading an isolated Lightning component which supports event proxying as described above. The results are as follows:

Lightning Component Wrapped in a Proxy Visualforce Page

Lightning Component Embedded Directly Inside the Main Visualforce Page

You can see from the images above, in the first image, the Lightning component wrapped in the proxy Visualforce page has been successfully isolated from the CSS styling inherited from the main Visualforce page while the second image demonstrates that the Lightning component embedded in the main Visualforce page has inherited its CSS styling.

In addition to that, any ‘monitored’ event fired from the Lightning component will be proxied back up to the parent Visualforce page.

Next Steps

This POC only deals with one-way communication from Lightning Component to Visualforce, however, the sample code could quite easily be expanded to support two way communication using the same principles. The idea would be to proxy method calls and fired events from other Lightning Components back through the Visualforce proxy page (LightningComponentWrapper.page). Given that this is simply a proof of concept, there was no need to implement that.

Is It Production Quality?

While the code should work without issue in a production environment, I would caution its use without proper testing for performance and client-side memory issues as using this method requires individual iframe’s for every Lightning component you want to proxy.

Project Files

Grab the files from GitHub: https://github.com/nathanfranklinau/isolated-lightning-component-poc