Base Components Considerations

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 Chat
• experience for Experience Builder sites
• wave 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

• Base Components Categories: API Modules

• Use a Base Component via a Module Import