Consider these guidelines when working with base components.
The Component Reference and the LWC Dev Guide refer to base components using:
A dash-separated name, namespace-component-name, for base components that are used in HTML template markup. For example, lightning-button-group.
A forward-slash-separated name, namespace/moduleName, for base components that are used as an API module and must be imported in JavaScript code. For example, lightning/toast.
Some base components make calls to Salesforce APIs like UI API, Connect REST API, GraphQL API, etc. and are subject to the corresponding API end-of-life policy.
To work with a base component, use its public attributes. If an attribute is marked “Reserved for internal use”, don’t use the attribute as it can change in a future release. See the Specification tab for a component in the Component Reference.
To style a base component, first consider its available variants and utility classes before trying to override or applying a custom class. Don’t depend on the internal markup or CSS classes of a base component as they can change in future releases. See Style Components with Lightning Design System.
To locate a base component in your template, use lwc:ref="uniqueId". Don’t use the id global attribute as the ID value is transformed into a globally unique value when the template is rendered. Querying your element using this.refs instead of this.querySelector is more performant because the latter must scan through the DOM elements to find a match. See Access Elements the Component Owns.
Base components are available in the lightning namespace. There are other components outside of these namespaces that are specific to a product area or app container, such as:
lightningsnapin for Embedded Service Chatexperience for Experience Builder siteswave for CRM Analytics.Some base components are used as an API module and must first be imported in the JavaScript file.
Some UI-based components like lightning/toast and lightning/prompt require you to pass in your configuration information to a method on the module.
API modules provide service or utility methods. For example, configure the navigation behavior for your components using lightning/navigation, or communicate across the DOM using lightning/messageService.
Some API modules provide wire adapters and JavaScript functions for working with Salesforce data using Lightning Data Service. For example, get record data using lightning/uiRecordApi, or work with list views using lightning/uiListsApi.
See Also
j