Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Supported JavaScript
Invoking Actions on Component Initialization
Sharing JavaScript Code in a Component Bundle
Sharing JavaScript Code Across Components
Using External JavaScript Libraries
Dynamically Creating Components
Detecting Data Changes with Change Handlers
Finding Components by ID
Working with Attribute Values in JavaScript
Working with a Component Body in JavaScript
Working with Events in JavaScript
Modifying the DOM
Modifying DOM Elements Managed by
Modifying DOM Elements Managed by External Libraries
Checking Component Validity
Modifying Components Outside the Framework Lifecycle
Throwing and Handling Errors
Calling Component Methods
Dynamically Adding Event Handlers To a Component
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Formatting Dates in JavaScript
Using JavaScript Promises
Making API Calls from Components
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Modifying DOM Elements Managed by External Libraries

You can use different libraries, such as a charting library, to create and manage DOM elements. You don’t have to modify these DOM elements within the render event handler or a renderer because they are managed by the external library.

A render event handler or a renderer are used only to customize DOM elements created and managed by the Aura Components programming model.

To use external libraries, use <ltng:require>. The afterScriptsLoaded attribute enables you to interact with the DOM after your libraries have loaded and the DOM is ready. <ltng:require> tag orchestrates the loading of your library of choice with the rendering cycle of the Aura Components programming model to ensure that everything works in concert.