Modifying DOM Elements Managed by the Lightning Component Framework
The framework creates and manages the DOM elements owned by a component. If you want to modify these DOM elements created
by the framework, modify the DOM elements in the handler for the component’s render event or in a custom renderer. Otherwise,
the framework will override your changes when the component is rerendered.
For example, if you modify DOM elements directly from a client-side controller, the changes may be overwritten when the component
You can read from the DOM outside a render event handler or a custom renderer.
The simplest approach is to leave DOM updates to the framework. Update a component’s attribute and use an expression in the markup.
The framework’s rendering service takes care of the DOM updates.
You can modify CSS classes for a component outside a renderer by using the $A.util.addClass(), $A.util.removeClass(),
and $A.util.toggleClass() methods.
There are some use cases where you want to perform post-processing on the DOM or react to rendering or rerendering of a component.
For these use cases, there are a few options.
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 Lightning Component
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. tag orchestrates the loading of your library of choice with
the rendering cycle of the Lightning Component framework to ensure that everything works in concert