Dynamic List Item (Developer Preview)
lightning-dynamic-list-item
Represents a row in a lightning-dynamic-list-container component. Each row is dynamically positioned by the container based on the current scroll position. This component requires API version 67.0 or later. To use this component, select the Dev channel in Salesforce Release Manager.
For Use In
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline
Working with dynamic lists is available as a developer preview. This feature isn’t generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All commands, parameters, and other features are subject to change or deprecation at any time, with or without notice. Don’t implement functionality in production with these commands or tools.
lightning-dynamic-list-item represents a row in the lightning-dynamic-list-container component.
To use dynamic lists, opt in to the Dev channel in Salesforce Release Manager.
lightning-dynamic-list-container and lightning-dynamic-list-item must be part of the same LWC component to share the same shadow DOM. Use lightning-dynamic-list-item within lightning-dynamic-list-container and place them in the same LWC template.
When building your lists, avoid padding on elements between lightning-dynamic-list-container and lightning-dynamic-list-item. Use margin on rows wrapped by lightning-dynamic-list-item for spacing between rows and between rows and container.
lightning-dynamic-list-item doesn’t provide any styling. You can use custom or SLDS utility classes to create a visual container for your list items.
Include a height for lightning-dynamic-list-container. The height doesn’t have to be fixed but it must be bounded to ensure proper rendering and scroll behavior.
Here’s how you can load record data by using the lightning/graphql module. For example, you can request 1000 contact records and each subset renders in the DOM as you scroll.
lightning-dynamic-list-container