Render Tree

Published: September 03, 2019
Edited: October 18, 2019

The Lightning render tree has very conceptual similarities with the HTML DOM render tree. It is also used to define the elements that are shown and how they are positioned and rendered. Furthermore, the elements have properties that can be set to change the way that they appear. Still, Lightning's render tree is completely different than the HTML DOM. It is completely written in javascript and has a completely different (more basic) API. Later we'll learn how the render tree is defined via templates, and changed over time.

Elements

Lightning's render tree is composed out of elements. Elements are render primitives of the lng.Element type that can be set up to show a texture or not. This texture can be anything; from a solid color to a gradient, a piece of text or an image. Properties can be used to set their position and appearance:

  • The positioning of an element is relative to its parent and can be defined using the x and y properties.
  • An element can be scaled or rotated using transform properties.
  • An element will only show something when a texture is attached to it.
  • Rendering properties define if and how the element is being rendered.