Base Components: Aura Vs Lightning Web Components

Many of the base Lightning web components have the same functionality and attributes as their Aura counterparts. Some have subtle differences.

Lightning web components inherit global HTML attributes and events, making them more functional and performant than their Aura counterparts. The Component Reference doesn’t list the global HTML attributes and events for each component. See Global Attributes and Events at MDN.

For component styling, the base Aura components and Lightning web components both support design variations and SLDS utility classes. The base Aura components also support custom styling with your own classes. However, Lightning web components follow shadow DOM standards, which prevent custom styling with your own classes. Some base LWC components support SLDS styling hooks for custom styling. See Style Components Using Lightning Design System Styling Hooks.

The following table lists usage differences between Aura base components and their Lightning web component counterparts. Aura components follow the name format namespace:componentName, with a colon that separates the namespace and component name. Lightning web components follow the name format namespace-component-name, with a dash that separates the namespace and component name.

Table 1. Mapping of Aura Components to Lightning Web Components

NamespaceAura ComponentLightning Web ComponentDifferences
lightningaccordionaccordionlightning:accordion supports the initialization of multiple open sections in simple markup. To initialize lightning-accordion with multiple open sections, pass the array of section names using JavaScript.
lightningaccordionSectionaccordion-sectionlightning:accordionSection supports custom menu actions through an actions attribute that passes in a lightning:buttonMenu component. The title attribute for the Aura component provides tooltip text when you hover over an accordion section. lightning-accordion-section supports custom menu actions through an actions slot for lightning-button-menu. The title attribute in the Lightning web component is currently reserved for internal use.
lightningavataravatar-
lightningbadgebadge-
lightningbreadcrumbbreadcrumb-
lightningbreadcrumbsbreadcrumbs-
lightningbuttonbutton-
lightningbuttonGroupbutton-group-
lightningbuttonIconbutton-iconlightning-button-icon doesn’t support iconClass.
lightningbuttonIconStatefulbutton-icon-stateful-
lightningbuttonMenubutton-menulightning:buttonMenu doesn’t support the onclick and onclose event handlers.
lightningbuttonStatefulbutton-statefulIn lightning:buttonStateful, use the state attribute to show when the button is selected. In lightning-button-stateful, use the selected attribute.
lightningcardcardIn lightning:card, you can set the title and footer attributes as strings or objects, which enables you to pass components. You can use the actions attribute to specify a lightning:button or lightning:buttonIcon to display in the card’s header. In lightning-card, you can set the title and footer attributes to text only. To include markup or other components, use named slots. You can specify actions only in an action named slot.
lightningcarouselcarousel-
lightningcheckboxGroupcheckbox-group-
lightningclickToDialclick-to-dial-
lightningcomboboxcombobox-
lightningcontainer-Lightning web component not yet available.
lightningdatatabledatatablelightning:datatable doesn’t support custom data types in table cells. lightning:datatable supports custom CSS classes for styling a column of standard data types only. lightning-datatable supports custom data types in table cells. lightning-datatable supports custom CSS classes for styling a column for custom data types only.
lightningdualListboxdual-listbox-
lightningdynamicIcondynamic-icon-
lightningfileCard-Lightning web component not yet available.
lightningfileUploadfile-upload-
lightningflexipageRegionInfo-In Aura, use flexipageRegionInfo to make the containing component aware of the width it can occupy. In Lightning web components, use the flexipageRegionWidth public property for this purpose. See Make a Component Width-Aware.
lightningflowflowSee Create and Start a Flow in a Custom LWC.
lightningformattedAddressformatted-address-
lightningformattedDateTimeformatted-date-timeIn lightning:formattedDateTime, set the hour12 attribute using true or false strings or a variable. In lightning-formatted-number, set the hour12 attribute only by using a variable. Strings are always interpreted as true.
lightningformattedEmailformatted-email-
lightningformattedLocationformatted-location-
lightningformattedNameformatted-name-
lightningformattedNumberformatted-numberIn lightning:formattedNumber, use the style attribute to specify the type of number to display. In lightning-formatted-number, use the format-style attribute for this purpose.
lightningformattedPhoneformatted-phone-
lightningformattedRichTextformatted-rich-text-
lightningformattedTextformatted-text-
lightningformattedTimeformatted-time-
lightningformattedUrlformatted-url-
lightninghelptexthelptext-
lightningiconicon-
lightninginputinput-
lightninginputAddressinput-address-
lightninginputFieldinput-fieldlightning:inputField doesn’t provide a way to indicate that a field has been modified but not saved. lightning-input-field supports a dirty attribute to indicate that the field has been modified by the user but not saved or submitted. For more information, see the recordEditForm differences. lightning:inputField supports the readonly attribute but lightning-input-field supports both readonly and read-only.
lightninginputLocationinput-location-
lightninginputNameinput-name-
lightninginputRichTextinput-rich-textlightning:inputRichText requires you to use the lightning:insertImageButton child component to add an insert image button. It doesn’t support an insert link button or custom buttons. lightning-input-rich-text provides buttons to insert images and links. lightning-input-rich-text supports adding custom buttons with the components lightning-rich-text-toolbar-button-group and lightning-rich-text-toolbar-button (beta).
lightninginsertImageButton-An insert image button is supported in lightning-input-rich-text so you don’t need lightning:insertImageButton.
lightninglayoutlayoutlightning:layout allows HTML tags, text, expressions, and other components between lightning:layoutItem components. lightning-layout does not allow expressions or other components between lightning-layout-item components. However, you can place HTML tags and text between lightning-layout-item components.
lightninglayoutItemlayout-itemSee the differences for lightning-layout.
lightninglistView-Lightning web component not yet available.
lightningmapmap-
lightningmenuItemmenu-item-
lightningnavigationnavigation moduleIn an Aura component, use the lightning:navigation component to access the navigation service. In a Lightning web component, import the lightning/navigation module in the component’s JavaScript. See Navigate to Pages, Records, and Lists.
lightningnotificationsLibraryplatformShowToastEvent moduleIn Aura components, add the notificationsLibrary component to create notices and toasts. The library provides showToast and showNotice events. In Lightning web components, import the lightning/platformShowToastEvent module in your component’s JavaScript. The module provides an event named ShowToastEvent. LWC doesn’t support notices yet. ShowToastEvent supports the same parameters, modes, and variants as Aura’s showToast. See Toast Notifications.
lightningoutputFieldoutput-fieldSee recordViewForm differences.
lightningoverlayLibrary-In Aura components, add the overlayLibrary component to create modal dialogs and popovers. The library provides showCustomModal(), showCustomPopover(), and notifyClose() methods.
lightningpath-Lightning web component not yet available.
lightningpicklistPath-Lightning web component not yet available.
lightningpillpilllightning:pill requires the media attribute to include an avatar or icon. The variant attribute is not available on lightning:pill. lightning-pill can accept avatars and icons as nested components.
lightningpillContainerpill-container-
lightningprogressBarprogress-bar-
lightningprogressIndicatorprogress-indicator-
lightningprogressRingprogress-ring-
lightningquipCard-Lightning web component not yet available.
lightningradioGroupradio-group-
lightningrecordEditFormrecord-edit-formlightning:recordEditForm doesn’t require you to nest lightning:inputField components directly in it. You can nest lightning:inputField components in HTML tags or other components such as lightning:layout to tailor the layout. lightning-input-field is intended to be used as a child of lightning-record-edit-form. You can nest lightning-input-field in HTML tags or another base component such as lightning-layout within lightning-record-edit-form. However, you can’t nest lightning-input-field in a custom component.
lightningrecordFormrecord-form-
lightningrecordViewFormrecord-view-formlightning:recordViewForm doesn’t require you to nest lightning:outputField components directly in it, although this is the expected usage. lightning-output-field must be a child of lightning-record-view-form. Don’t nest lightning-output-field in another element like lightning-layout. You can place it in a container such as within lightning-record-view-form.
lightningrelativeDateTimerelative-date-time-
lightningselect-Lightning web component not yet available. In a mobile environment, use the native <select> element.In a desktop environment, consider using the lightning-combobox Lightning web component. To support multiple selection, use lightning-dual-listbox.
lightningsliderslider-
lightningspinnerspinner-
lightningtabtabIn lightning:tab, use the id attribute to assign a string to identify a tab. In lightning-tab, use the value attribute to assign the tab identifier. The tabset uses these strings to determine which tab was clicked.
lightningtabsettabsetlightning:tabset uses the selectedTabId attribute to specify the open tab. lightning-tabset uses the active-tab-value attribute.
lightningtextareatextarea-
lightningtiletileIn lightning:tile, you can use <aura:set\> to add a media attribute that contains an avatar component or icon component. In lightning-tile, specify the avatar and icon components with media named slots.
lightningtreetree-
lightningtreeGridtree-grid-
lightningunsavedChanges-Lightning web component not yet available.
lightningverticalNavigationvertical-navigation-
lightningverticalNavigationItemvertical-navigation-item-
lightningverticalNavigationItemBadgevertical-navigation-item-badge-
lightningverticalNavigationItemIconvertical-navigation-item-icon-
lightningverticalNavigationItemOverflowvertical-navigation-item-overflow-
lightningverticalNavigationSectionvertical-navigation-section-
auraexpressionCustom JavaScriptSee Migrate Expressions.
aurahtml-N/A
auraiflwc:if / lwc:elseif / lwc:elseSee Migrate Conditionals.
auraiterationfor:eachSee Migrate Iterations.
aurarenderIflwc:if / lwc:elseif / lwc:elseSee Migrate Conditionals.
auratemplate-N/A
auratext-N/A
auratoken-N/A
auraunescapedHTML-N/A
forcecanvasApp-N/A
forceinputFieldinput-fieldforce:inputField has been replaced by lightning:inputField in Aura. To create editable fields based on field types, use lightning:inputField with lightning:recordEditForm or their Lightning web component counterparts.
forceoutputFieldoutput-fieldforce:outputField has been replaced by lightning:outputField in Aura. To create read-only fields based on field types, use lightning:outputField with lightning:recordViewForm or their Lightning web component counterparts.
forcerecordData@wireSee Understand the Wire Service.
forcerecordEditrecord-edit-formforce:recordEdit has been replaced by lightning:recordEditForm.
forcerecordViewrecord-view-formforce:recordView has been replaced by lightning:recordViewForm.
ltngrequireplatformResourceLoader moduleIn Aura components, add the <ltng:require> tag to your component markup to reference external static resources. In Lightning web components, import the lightning/platformResourceLoader module in your component’s JavaScript. See Use Third-Party JavaScript Libraries.

See Also