Quick question folks - what's the difference between extending

UmbElementMixin(LitElement)

and

UmbLitElement

? Should I be doing one or another in my package?

According to CoPilot: Extending your component with UmbElementMixin(LitElement) wraps LitElement with additional Umbraco-specific functionality. For example, the mixin provides built‑in support for consuming context (with methods like consumeContext) and observing context changes, which helps integrate your component into the Umbraco backoffice ecosystem. If you simply extend LitElement, you'd lose those helper methods and integration points, requiring you to implement that functionality manually. I can confirm that if I change UmbElementMixin(LitElement) to simply LitElement, functions and properties like consumeContext and localize stop working. So I guess CoPilot is right.

Yes, that is correct for LitElement, but I am talking about UmbLitElement

Ah ok. According to CoPilot (again): *The short answer is that UmbElementMixin is a mixin function that augments LitElement with additional Umbraco functionality, while UmbLitElement is a higher-level base class that bundles that mixin (and possibly other common functionality) so you don’t have to apply it manually each time. In other words, extending: UmbElementMixin(LitElement) • Gives you explicit control over how mixins are applied. • You can combine it with other mixins or change the order if needed. UmbLitElement • Provides a preconfigured component class that already includes the mixin functionality. • It’s a convenience base class for when you simply want the default Umbraco element behavior without extra customization. The choice depends on whether you need the flexibility of composing your own mixin chain or prefer using a ready-to-go base component.* So I guess we need someone to confirm if that's correct 😛

Huge if true

I think this would make a good forum post. That way other people can find it easier and it gets indexed by search engines

In the docs, the example for a section view is `UmbLitElement`: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/sections/section-view#lit-element But for a workspace view it is `UmbElementMixin(LitElement)`: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/workspaces/workspace-views#example-of-a-workspace-view

If CoPilot is correct, both should do exactly the same I guess 😄

So I was wondering if it's best to use one or the other in certain situations

I mostly use UmbElementMixin(LitElement), but only because I did it that way once and stuck with it. But if you don't do anything special, UmbLitElement would do the same I guess? With this knowledge I'd probably would have used just UmbLitElement

UmbElementMixin(LitElement)

is two imports, whereas

UmbLitElement

is only one import 😉 Joking aside, they do the same. The former gives you more control if you wanted to use something else than Lit, and the latter is just a magic box fixing your trouble.

Thanks Jacob, I've switched over to

UmbLitElement

across my codebase, one less import is nice as they can stack up..

Hehe thanks

😄