umbraco-umbraco-element

To build custom web components for the Umbraco Backoffice, use the UmbElementMixin or UmbLitElement patterns to create TypeScript elements that integrate with core Backoffice capabilities like context consumption and reactive state.

The Context API in Umbraco Elements works by using consumeContext() and provideContext() methods to wire your custom web components into the Backoffice context graph, allowing data sharing and state management across the UI hierarchy.

The best way to localize UI strings in an Umbraco Backoffice extension is to use the built-in localize controller provided by UmbLitElement, which automatically handles translations within your custom web components.

Yes, you can use Lit to create reactive state observations in Umbraco Elements by utilizing the observe() method, which reactively updates the UI when observable state changes occur in the Backoffice context.

When building Umbraco Backoffice components, you can optionally host controllers via the hostController() method, which manages controller lifecycle and cleanup within your UmbElementMixin or UmbLitElement implementation.

UmbElementMixin should be used instead of standard Lit elements because it provides official Backoffice-ready foundation methods, enabling seamless integration with context, observable state, localization, and controller hosting APIs specific to Umbraco.