Umbraco Element

Ease the integration with Backoffice by using a Umbraco Element

This provides a few methods to ease the connection with Backoffice, giving you the ability to:

• Consume a Context — Learn more about Consuming Contexts

• Provide Context — Learn more about Providing Contexts

• Observe a State — Learn more about States

• Use localization — Learn more about Localization

• Host Controllers — Learn more about Controllers

Create an Umbraco Element

You can turn any Web Component into an Umbraco Element by using the Umbraco Element Mixin, as done in the following example:

import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'

@customElement('my-extension-element')
class MyExtensionElement extends UmbElementMixin(HTMLElement) {
    ...
}

This means you can use any base class, whether it’s a Web Component or a base class from your framework of choice. As long as it’s compatible with Web Components, it can be enhanced to become an Umbraco Element:

import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'
import { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui'

@customElement('my-extension-element')
class MyExtensionElement extends UmbElementMixin(UUIButtonElement) {
    ...
}

The Backoffice is generally built with Lit. To simplify things for those who prefer using the Lit version provided by the Backoffice, you can create your Web Components as Umbraco Elements like this:

import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'

@customElement('my-extension-element')
export class MyExtensionElement extends UmbLitElement {
    ...
}

Notice that it is identical to this:

import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'
import { LitElement } from '@umbraco-cms/backoffice/external/lit'

@customElement('my-extension-element')
class MyExtensionElement extends UmbElementMixin(LitElement) {
    ...
}

Learn more about how to write Web Components with Lit in the Lit Element article.