Lightning Web Components: Open Source

Lightning Web Components is open source, empowering you to explore the source code, customize the behavior for your needs, and build enterprise-ready web components on any platform, not just Salesforce.

In the past, you had to use different frameworks to build different sides of an application hosted outside Salesforce. For example, you used Aura to build the employee-facing side of an application on Salesforce. You used React, Angular, or Vue to build the customer-facing side of the application, and you deployed it on Heroku or on another platform. Today, you can use Lightning web components to build both sides of the application. The benefits are significant. You can now learn one framework instead of several. You can share code between apps. And you’re using a cutting-edge framework built on web standards and based on the latest patterns and best practices.

GitHub repo—github.com/salesforce/lwc
Open-source developer site—lwc.dev

The Lightning Web Components Developer Guide (which you’re reading now) documents how to develop Lightning web components that run on Lightning Platform and how to use platform features like Lightning Data Service, Lightning Locker, and Lightning Out.

Like Lightning Web Components open source, Lightning Out lets you run Lightning web components off Lightning Platform. If your component needs to access Salesforce data, use Lightning Out. If your component doesn’t need Salesforce data or any other Salesforce feature, develop it using Lightning Web Components open source.

The code in the open-source repository is ahead of the code available on Lightning Platform. Most features released in the open-source repository are eventually released on Lightning Platform.

Lightning Web Components on the Salesforce platform is a managed version of Lightning Web Components: Open Source. When working off the Salesforce platform, you can download LWC, configure it your way, deploy your application on any hosting environment, and chose when to upgrade. When working on the Salesforce platform, Salesforce manages the configuration, deployment, and upgrade of LWC for all customers.

LWC OSS and LWC on the platform have different release schedules. The LWC engineering team usually releases LWC OSS weekly, whereas the Salesforce platform is released three times a year. Because of this difference, the version of LWC on the Salesforce platform is 3–6 months behind the open-source version of LWC.

The open-source LWC engine is identical to the LWC engine on the Salesforce platform. The difference is how the engine is configured at the compiler level and at run time.

Usage of experimental LWC APIs on the Salesforce platform is restricted and throws a linting error.
- Experimental template APIs: lwc:dynamic (deprecated and replaced by <lwc:component lwc:is={componentConstructor}>)
- Experimental JavaScript APIs: buildCustomElementConstructor, createElement, swapComponent, swapTemplate, and swapStyle
When pushing an LWC module to the Salesforce platform, the following linting rules are applied.
- All the rules from @salesforce/eslint-config-lwc/base are enforced. ESLint ignores inline configuration for those rules.
- Dynamic import (import('c/foo')) is prohibited.
- Access to Aura from an LWC module is prohibited (for example, $A).
@salesforce/* imports are validated against the organization’s metadata (for example, Apex methods, labels, and schema).

Components run with @lwc/synthetic-shadow enabled. This mode allows support for IE11, which doesn’t implement shadow DOM. As a side effect, all the styles injected at the page level (for example, using loadStyle from lightning/platformResourceLoader) leak into components.
link and href attributes on the SVG <use> element are sanitized by Locker to prevent potential malicious script injection.
LWC modules are evaluated inside Lightning Locker or Lightning Web Security. On top of the restrictions applied to standard web platform APIs, Locker and Lightning Web Security add a few restrictions to LWC components:
- this.template.host always returns null.
- Accessing shadowRoot on a component retrieved from the template always returns null.

See Also