Palette Components are just custom web elements, in that they are standard JavaScript classes which extend the HTMLElement class.

While a Component is rendered on a page, it will go through it's "lifecycle," invoking lifecycle methods along the way. These methods are where the majority of your component logic will live.

Lifecycle

The Component lifecycle is:

1. Creation: The element has been allocated but not yet mounted
2. Initialization: The element has been attached to the DOM and is initializing
3. Updates: Attribute changes, state changes, or manual requests have triggered an update
4. Unmount: The component has been removed from the document and cleaned

Each part of the lifecycle (aside from Creation) has associated methods which can be defined on the Component class. If not defined, they are simply ignored.

// Initialization scripting for the component. Can return a cleanup function.
script();

// Directly before a re-render will occur
beforeUpdate();

// Directly after a re-render has completed
afterUpdate();

// Final lifecycle method called on removal
finalize();
Copy

Best Practices

It can be hard to keep track of what should go in which lifecycle method. Here's a table to help make that easier on ya: