--- schema_version: "1" id: 8044f807b2fc34d51bcb4d4e4cbf34feb844735363a1cf48b709147a577598fb title: Lightning Base Components Considerations collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/slds/lightning-components-considerations.md canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/lightning-components-considerations.html source_site: developer.salesforce.com content_type: documentation content_hash: e25d8fdc6e7151786d40423d30da146fcaf518409ea113725eae880a5e203bd7 products: - Lightning Aura Components Developer Guide - Platform Developer Content --- # Lightning Base Components Considerations Learn about the guidelines on using the base components. **note:** Don’t depend on the markup of a base component as its internals can change in future releases. Reaching into the component internals can also cause unrecoverable errors in the app. For example, using `cmp.get("v.body")` and examining the DOM elements can cause issues in your code if the component markup changes down the road. See the knowledge article [Salesforce Component Internals Are Protected](https://help.salesforce.com/s/articleView?id=001395244&type=1). ## Alternatives to Targeting the Component DOM With Lightning Locker enforced, you can’t traverse the DOM for components you don't own. Instead of accessing the DOM tree, take advantage of value binding with component attributes and use component methods that are available to you. For example, to get an attribute on a component, use `cmp.find("myInput").get("v.name")` instead of `cmp.find("myInput").getElement().name`. The latter doesn’t work if you don’t have access to the component, such as a component in another namespace. ## Deprecated Block-Element-Modifier (BEM) Notation In LWC API version 61.0, Salesforce changed the specification for SLDS class name modifiers. We changed from using the double-dash `--` notation for modifiers to using the single-underscore notation `_`. Use the latest notation when authoring your components. ```nolang Neutral Link ``` ```nolang Neutral Link ``` ## Individual Component Considerations Many of the base components are still evolving and these considerations can help you while you’re building your apps. **lightning:buttonMenu** This component contains menu items that are created only if the button is triggered. You can’t reference the menu items during initialization or if the button isn’t triggered yet. **lightning:input** Fields for percentage and currency input must specify a step increment of 0.01 as required by the native implementation. ```nolang ``` When working with checkboxes, radio buttons, and toggle switches, use `aura:id` to group and traverse the array of components. Grouping them enables you to use `get("v.checked")` to determine which elements are checked or unchecked without reaching into the DOM. You can also use the `name` and `value` attributes to identify each component during the iteration. The following example groups three checkboxes together using `aura:id`. ```nolang
Select your favorite color:
``` In your client-side controller, you can retrieve the array using `cmp.find("colors")` and inspect the `checked` values. When working with `type="file"`, you must provide your own server-side logic for uploading files to Salesforce. Read the file using the FileReader HTML object, and then encode the file contents before sending them to your Apex controller. In your Apex controller, you can use the `EncodingUtil` methods to decode the file data. For example, you can use the Attachment object to upload files to a parent object. In this case, you pass in the base64 encoded file to the `Body` field to save the file as an attachment in your Apex controller. Uploading files using this component is subject to regular Apex controller limits, which is 1 MB. To accommodate file size increase due to base64 encoding, we recommend that you set the maximum file size to 750 KB. You must implement chunking for file sizes larger than 1 MB. Files uploaded via chunking are subject to a size limit of 4 MB. For more information, see the [Apex Developer Guide](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/) . Alternatively, you can use `lightning:fileUpload` to upload files directly to records. **lightning:tab** This component creates its body during runtime. You can’t reference the component during initialization. Referencing the component using `aura:id` can return unexpected results, such as the component returning an undefined value when implementing `cmp.find("myComponent")`. **lightning:tabset** When you load more tabs than can fit the width of the viewport, the tabset provides navigation buttons to scroll horizontally to display the overflow tabs. ## Methods with Limited Support on Some Components Some methods have limited support or no support on these components: - `lightning:avatar` - `lightning:badge` - `lightning:breadcrumb` - `lightning:formattedDateTime` - `lightning:formattedNumber` - `lightning:icon` - `lightning:input` - `lightning:inputField` - `lightning:outputField` - `lightning:relativeDateTime` - `lightning:textarea` **`getDef()`** `getDef()` can’t get API methods or attach change handlers in the specified components. The correct way to work with base components is to work with the instances, and not attempt to access the component or its definition. **`getReference()`** `getReference()` method support is limited. You can’t use it with controllers with these components. For example, `getReference('v.value')` works but `getReference('c.myFunc')` doesn’t work. **`afterRender()`** `afterRender()` isn’t supported by the specified components. Don’t call `afterRender()` on Lightning base components directly. For example, `component.find('lightning:input').afterRender()` doesn’t work. **No nested component access** You can’t access sub-components inside a base component. You can only use the exposed API. For example, `cmp.find('mylightning:inputField').find('innercomponent')` doesn’t work.