Limitations for Aura Components With LWS

Here are some known limitations for Aura components running with LWS.

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

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 Aura 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.

See Also