Salesforce Docs Portal

Upgrade Record Components to LWC Technology

Update record components in your Aura sites to run on Lightning Web Component (LWC) technology, and see improved accessibility and stylistic changes.

Required Editions

Available in: Salesforce Classic and Lightning Experience
Available in: Enterprise, Performance, Unlimited, and Developer Editions
Applies to: Aura sites
Important
Important Starting in Winter ’25, the Create Record Form, Record Banner, and Record Detail components are eligible for upgrade. In Summer ’25, the upgrade is enforced for all orgs. We strongly recommend that you test all customized record components before the update.

If your record components use custom CSS, the upgrade can cause breaking changes. We strongly recommend that you turn on the setting and test all your record components, in either a sandbox or an unpublished org, before publishing your changes. The setting can be turned off until Summer ’25.

To upgrade your components:

  1. From Setup | Digital Experiences, go to Settings.
  2. Under Experience Management Settings, select Use Lightning web components on your record pages in Aura sites.

CSS Equivalents in Aura and LWC Components

When you upgrade your Aura record components to LWC technology, you can expect to see stylistic changes. If your components use custom CSS, use these equivalent CSS selectors to give your upgraded components similar CSS customizations.

CSS Selector Equivalents
Section in UI UI Element Aura Selector LWC Equivalent
Record Detail: Headline General 
.forceCommunityRecordHeadline .slds-page-header,
.forceCommunityRecordHeadline .forceRecordLayout.slds-page-header

.forceCommunityRecordHeadline .slds-page-header,
.forceCommunityRecordHeadline .forceRecordLayout.slds-page-header
Field Title 
.forceCommunityRecordHeadline .slds-form-element__label
 
.forceCommunityRecordHeadline .slds-text-title
Field Value 
.forceCommunityRecordHeadline .slds-form-element__control
 
.forceCommunityRecordHeadline .slds-text-body--regular
Actions Ribbon 
.forceCommunityRecordHeadline .actionsContainer
 
.forceCommunityRecordHeadline .actionsContainer, .forceCommunityRecordHeadline .chatterActionContainer
Record Icon 
.forceCommunityRecordHeadline .profilePicWrapper
 
.forceCommunityRecordHeadline force-social-record-avatar-wrapper.forceCommunityRecordHeadline records-highlights-icon
Record Title 
.forceCommunityRecordHeadline .slds-page-header__title
 
.forceCommunityRecordHeadline .slds-page-header__title
Field Row 
.forceCommunityRecordHeadline .slds-page-header__detail-row
 
.forceCommunityRecordHeadline .slds-page-header__detail-row
Record Detail: View Section Title 
.forceCommunityRecordDetail .form-element__label
 
.forceCommunityRecordDetail .slds-form__item .slds-form-element__label
Section Text Value 
.forceCommunityRecordDetail .slds-form-element .uiOutputText

.forceCommunityRecordDetail .slds-form__item lightning-formatted-text
Checkbox 
.forceCommunityRecordDetail input.uiInput--checkbox
 
.forceCommunityRecordDetail .slds-checkbox
Record Detail: Edit Field Title 
.modal-container .forceCommunityRecordDetail .form-element__label
 
.uiModal--recordActionWrapper .slds-form__item .slds-form-element__label
Text Input 
.modal-container .forceCommunityRecordDetail .uiInput--input input
 
.uiModal--recordActionWrapper lightning-input input.slds-input
Select Input 
.modal-container .forceCommunityRecordDetail .uiInput--select .select
 
.uiModal--recordActionWrapper lightning-picklist .slds-combobox
Checkbox 
.modal-container .forceCommunityRecordDetail input.uiInput--checkbox
 
.uiModal—recordActionWrapper .slds-checkbox

For visual elements: 


.uiModal—recordActionWrapper .slds-checkbox .slds-checkbox_faux
Form Body 
.modal-container .forceCommunityRecordDetail .slds-card
 
.uiModal--recordActionWrapper records-lwc-record-layout
Create Record Form Save/Confirm Button 
.forceCommunityCreateRecordForm button, .forceCommunityCreateRecordForm .button
 
.forceCommunityCreateRecordForm records-form-footer .slds-button.slds-button_brand:not(.slds-combobox__input)
Footer Section 
.forceCommunityCreateRecordForm .buttonWrapper


.forceCommunityCreateRecordForm records-form-footer
Page Title 
.forceCommunityCreateRecordForm .headerLabel
 
.forceCommunityCreateRecordForm h1.headerLabel
Form Area 
.forceCommunityCreateRecordForm .forceQuickActionLayout
 
.forceCommunityCreateRecordForm records-record-layout-block