Migrate Base Components

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

Migrate Base Component Markup

This Aura component uses the lightning:formattedText base component.

1<aura:component>
2    <lightning:formattedText linkify="true" value="I like salesforce" />
3</aura: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 base component for Aura is also available as a Lightning web component. See the Component Reference.
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.

1<template>
2  <lightning-formatted-text linkify value="I like salesforce"></lightning-formatted-text>
3</template>

Migrate Base Component Event Handlers

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.

1<aura:component>
2    <lightning:button
3      label="Submit"
4      title="Submit record data"
5      onclick="{! c.handleClick }" />
6</aura:component>

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

1({
2  handleClick: function (cmp, event, helper) {
3    alert("You clicked: " + event.getSource().get("v.label"));
4  },
5});

Here’s the equivalent Lightning web component.

1<template>
2  <lightning-button label="Submit" title="Submit record data" onclick={handleClick}>
3  </lightning-button>
4</template>

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,

1import { LightningElement } from "lwc";
2export default class MigrateButton extends LightningElement {
3  clickedButtonLabel;
4
5  handleClick(event) {
6    this.clickedButtonLabel = event.target.label;
7  }
8}

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

1<div onkeydown="{!c.handleKeyDown}">
2  <lightning:input type="search" value="{!v.value}" onchange="{!c.handleChange}" />
3</div>

Here’s the equivalent Lightning web component.

1<lightning-input
2  value={val}
3  label="Enter some text"
4  onchange={handleChange}
5  onkeydown={handleKeyDown}
6>
7</lightning-input>

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

Migration Considerations

Base components for LWC 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 Reference 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