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
2. Initial Render
3. Mount
4. Re-Renders and Updates
5. Unmount

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();

// Handle errors thrown in other lifecycle methods
onError();
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: