1

I had to load an external library in the header of the community portal because the requirement was to not host the files in Salesforce(though I also had issues getting the resource files to load using LWC).

For the most part everything worked okay except that we noticed that Salesforce is modifying the window.ShadowRoot object which was breaking some of the CSS for that library. Here's a summary of what we did to get around it.

<script>
    // Taking a snapshot of the window's ShadowRoot.
    window.ShadowRootBackup = window.ShadowRoot;

    window.onload = function() {
        // At this point Salesforce has modified the "window.ShadowRoot" so 
        // we are reverting that change to get the library to work.
        window.ShadowRoot = window.ShadowRootBackup;

        // some code to do with the library
    }
</script>

This got the library to work.

Also, we tested the portal extensively and it seems like everything is still operating as expected. However I am wondering if anybody here has any previous experience with the ShadowRoot manipulation that Salesforce performs on load and if we are breaking something we haven't detected yet?

1 Answer 1

3

Well, you are basically punching a hole through the Shadow DOM semantics that LWC provides for you. LWC's native Shadow DOM parity is a work-in-progress, but I think it's close enough that you might not see any difference in browsers that have good Shadow DOM support. However, I would assume that things will break in browsers that lag in this area (did you test IE11?) and you might run into subtle issues that will be hard to debug.

It sounds like maybe the library you're trying to use doesn't support Shadow DOM so it might be safer to make modifications in there to make it shadow-compatible instead of compromising the stability of your LWC components.

1
  • The library is relying on the shadow dom. The problem is that after Salesforce modifies the main Shadow Root it throws off the logic in the library. I understand your point and share the same views. We will do some more testing in other browsers as you have proposed!
    – Arthlete
    Nov 20, 2019 at 15:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .