Migrate Base Components

Base Lightning components are building blocks that Salesforce provides in the lightning namespace. Base Lightning components have a different syntax when you use them in the two programming models.

This Aura component uses the lightning:formattedText base component.

To migrate this markup to a Lightning web component:

  • Replace <aura:component></aura:component> with <template></template>.
  • Change the colon that separates the namespace and component name to a dash.
  • Verify that the Aura base Lightning component is available as a Lightning web component. See the Component Library.
  • Change the camel case component name (formattedText) to a dash-separated name (formatted-text).
  • Remove the true or false value on the boolean attribute. If present, a boolean attribute denotes that its value is true.
  • Change the self-closing tag to a full closing tag (</lightning-formatted-text>).

Here’s the equivalent Lightning web component.

Most event handlers on Aura base components have a Lightning web component equivalent. This Aura component uses the lightning:button base component with the onclick event handler.

To retrieve the label on the button that fired the click event, use event.getSource().

Here’s the equivalent Lightning web component.

To get a reference to the component that dispatched the event, use the event.target property, which exposes public properties on the base component. For example, return the label on a clicked lightning-button component using event.target.label,

If the base Aura component is wrapped with an HTML element so you can listen to an HTML event on the component, move the event handler to the base Lightning web component. For example, lightning:input supports several event handlers and it doesn’t support onkeydown. However, Aura enabled you to create a div wrapper to handle the keydown event.

Here’s the equivalent Lightning web component.

Not all event handlers in Aura base components have a Lightning web component equivalent. For each base component’s specification, see the Component Library.

Some base Lightning web components provide a richer set of features than their Aura counterparts. Some base components might require more changes to migrate. Component differences are noted in Base Components: Aura Vs Lightning Web Components.

The Component Library includes examples, documentation, and specification for the base components. In a component’s reference page, to compare the Lightning web component and its Aura counterpart, click View as Aura Component or View as Lightning Web Component.

See Also