Welcome to the latest updates in Lightning Web Components for the Salesforce Spring ’24 release. In case you’ve missed any exciting updates, this post will highlight some of the coolest LWC enhancements.
New in LWC API Version 60.0
Empty Comment Nodes Replace Empty Text Nodes
Starting from LWC API version 60.0, custom components render empty comment nodes instead of empty text nodes in features like slots in light DOM, scoped slots, and the lwc:if directive.
Example:
<template>
<template lwc:if={expression}>Some content here</template>
</template>In LWC API version 59.0 and earlier:
"Some content here"In LWC API version 60.0 and later:
<!–--->
"Some content here"
<!---->Light DOM Renders Additional Whitespace Characters
Custom components using LWC API version 60.0 and later may observe additional empty text nodes in light DOM slots. Salesforce recommends updating your code to accommodate this change.
renderedCallback() {
const myExpectedChildNode = this.childNodes[0];
}In LWC API version 59.0 and earlier, this.childNodes[0] referred to the first slotted element in the light DOM component. In LWC API version 60.0 and later, this.childNodes[0] resolves to an empty text node.
Decorators Throw a Syntax Error in Non-LightningElement Classes
Starting from LWC API version 60.0, decorators can only be used in components that extend the LightningElement class. Remove decorators from other classes if they are used.
Object Rest and Spread Transpilation Is Removed
Custom components using LWC API version 60.0 and later now use native rest and spread syntax instead of the Babel-transpiled version to enhance performance.
Lightning Record Picker Component for Record Searching
Starting from the Spring ’24 Release, we can use the lightning-record-picker component for easy record selection on desktop and mobile. It is also possible to customize its behavior and appearance and add filters for precise record retrieval.
This feature is now generally available with some updates:
- you can now retrieve up to 100 records compared to the previous limit of 50,
- the component offers clearer error messages for invalid configurations and supports new attributes.
<lightning-record-picker
label="Select a record"
placeholder="Search..."
object-api-name="Contact"
value={initialValue}
onchange={handleChange}
></lightning-record-picker>New Lightning Web Components
In the Spring ’24 release, one new component was added.
wave-wave-dashboard-lwc (in Beta) – This component allows you to embed CRM Analytics dashboards within Lightning Experience pages like Home, Accounts, or Opportunities, as well as in other Lightning web components. It showcases interactive dashboards with customizable options such as header and title visibility settings.
Remember that it requires API version 60.0 or later.
Changed Lightning Web Components
Here are the main changes in components.
- lightning-datatable
new attribute wrap-table-header—Specifies that the header text for each table column wraps if it doesn’t fit within the column width. Up to three lines of wrapped text display and the remaining text is truncated. The default value is false. - lightning-input
new attribute role—Creates an accessible combo box using lightning-input instead of the lightning-combobox component or a custom component. Set role=”combobox” and type=”text” to create a combo box. The only valid value for role is combobox. - lightning-input-field, lightning-record-form
New behaviors: Supports use in orgs that have enabled multiple currencies. Fields for currency values no longer display a currency symbol. They are formatted as decimal numbers. - lightning-modal
The rules to determine where to place focus in a modal have changed. - lightning-pill-container
new attribute href—Adds a link to a pill in the container. - lightning-pill, lightning-pill-container
Changed accessibility behaviors: Keyboard navigation uses only the Tab key between focusable elements, not arrow keys. When a pill’s remove button has focus, only the Enter key and the Spacebar can activate it to remove the pill. Previously, the Delete and Backspace keys also worked to remove the pill.
Manage Workspace Tabs and Subtabs
The LWC Workspace API offers tools for handling workspace tabs and subtabs within a Lightning console app. This feature is now generally accessible, featuring minor bug fixes and enhancements from its beta release.
These API methods for LWC are available for Lightning console apps.
- closeTab()—Closes a workspace tab or subtab.
- disableTabClose()—Prevents a workspace tab or subtab from closing.
- focusTab()—Focuses a workspace tab or subtab.
- getAllTabInfo()—Returns information about all open tabs.
- getFocusedTabInfo()—Returns information about the focused workspace tab or subtab.
- getTabInfo()—Returns information about the specified tab.
- openSubtab()—Opens a subtab within a workspace tab. If the subtab is already open, the subtab is focused.
- openTab()—Opens a new workspace tab. If the tab is already open, the tab is focused.
- refreshTab()—Refreshes a workspace tab or a subtab specified by the tab ID.
- setTabHighlighted()—Highlights the specified tab with a different background color and a badge. Tab highlights don’t persist after reloading a Lightning console app.
- setTabIcon()—Sets the icon and alternative text of the specified tab.
- setTabLabel()—Sets the label of the specified tab.
These wire adapters are available for Lightning console apps.
- EnclosingTabId()—Returns the ID of the enclosing tab.
- IsConsoleNavigation()—Determines whether the app it’s used within uses console navigation.
Final Thoughts
Here is my pick of top LWC updates. As you explore them, remember to use Salesforce’s documentation and community support. By staying informed and engaged, you can make the most of these advancements and deliver exceptional solutions. Happy coding!
