Lightning Web Security Limitations

Here are some known limitations for Lightning components running with Lightning Web Security (LWS).

This limitation applies to Lightning web components (LWC) and Aura components.

The top property must be used with these accessors.

  • window.top
  • globalThis.top
  • self.top

The location property must be used with these accessors.

  • window.location
  • document.location
  • globalThis.location
  • self.location
  • document.defaultView.location

This limitation applies to LWC and Aura components.

Generally, it's not recommended to override or shadow built-in global variables.

Here's an example of an override.

Here's an example of shadowing.

In LWS, properties such as top and location on the window global aren’t accessible to your code by default. To allow components to have access to these properties, LWS performs some code transformations behind the scenes.

For this reason it’s best to avoid shadowing of top and location properties. When shadowing those properties, your code can produce unexpected results or not work at all. For example, you can see error messages such as Cannot access 'location' before initialization.

One way to make sure your code is free of such patterns is to use the ESLint no-shadow rule with builtinGlobals: true option.

Rename the variables to something other than location or top. You can use loc instead of location, for example.

These patterns produce runtime errors in Aura components:

  • async/await
  • dynamic import

Aura components can’t use these techniques because they’re features introduced in ES6, which isn’t supported in Aura. Use of this syntax is typically flagged by validation rules at development time.

If an Aura component uses a static resource that uses async/await or dynamic import, it’s not detected until runtime where the component encounters an error.

When Aura components run with LWS, the $A global variable isn’t available to the eval() function or the Function constructor.

There’s no workaround for using $A with eval().

Using eval() with force:refreshView to refresh a view in LWC doesn't work with LWS. Instead, use RefreshView API.

In Aura components, you can use dependency injection for the Function constructor as a workaround when LWS is enabled.

Define the function to accept an extra parameter, $A, which you can supply wherever it is invoked and $A exists on the global scope.

This example constructs a new function fn and specifies $A as one of its parameters, then invokes the function passing a reference to the accessible $A.

The $A variable isn't supported in Lightning web components because it's specific to the Aura framework.

See Also