Skip to content
LWC Garden

lightning/* Imports

Configuration

Add the @lwc-garden/utils package to the modules config in your lwr.config.json file:

lwr.config.json
{
  "lwc": {
    "modules": [
      {
        "npm": "@lwc-garden/utils"
      }
    ]
  },
}

Supported Imports

The below is a list of currently supported lightning/* based imports that can run locally. This is not an extensive list and only includes utilities, not components. lightning-* components may be found here.

lightning/platformResourceLoader

Both loadStyle and loadScript will function slightly differently based on if the synthetic shadow is being used or if the native shadow is used.

Native shadow will import resources within the context of the caller (the LightningElement the loadStyle or loadScript method was called from). This will mean any CSS/JS imported will be scoped to that specific component.

lwc/myComponent/myComponent.html
<c-my-component>
  #shadow-root
  <p>My Component</p>
  <style type="text/css">@import url('/force-app/main/default/staticresources/testResource/style.css');</style>
  <script type="text/javascript" src="/force-app/main/default/staticresources/testResource/script.js" async></script>
</c-my-component>

Synthetic shadow will import resources globally, in the document.head, and allow all CSS/JS imports to be accessible by other components. This is currently the default for on-platform Salesforce development.

<head>
  <style type="text/css">@import url('/force-app/main/default/staticresources/testResource/style.css');</style>
  <script type="text/javascript" src="/force-app/main/default/staticresources/testResource/script.js" async></script>
</head>