umbraco-umbraco-element by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-umbraco-elementUmbraco 元素是一种 Web 组件增强功能,它通过 UmbElementMixin 简化了与 Umbraco 后台的集成。它提供了消费/提供上下文、观察状态、处理本地化和托管控制器的方法。UmbElementMixin 可以应用于任何与 Web 组件兼容的基类,而 UmbLitElement 是一个便捷的包装器,它将此混入与 Lit 结合在一起。
在实现之前,请务必获取最新的文档:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('my-element')
export class MyElement extends UmbLitElement {
constructor() {
super();
// 访问内置功能
this.consumeContext(MY_CONTEXT, (context) => {
console.log('Context consumed:', context);
});
}
render() {
return html`
<div>
<h3>${this.localize.term('myKey')}</h3>
<p>My custom element</p>
</div>
`;
}
}
export default MyElement;
import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
@customElement('my-element')
export class MyElement extends UmbElementMixin(HTMLElement) {
constructor() {
super();
this.consumeContext(MY_CONTEXT, (context) => {
// 使用上下文
});
}
connectedCallback() {
this.innerHTML = `
<div>
<h3>My Element</h3>
</div>
`;
}
}
export default MyElement;
import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui';
@customElement('my-custom-button')
export class MyCustomButton extends UmbElementMixin(UUIButtonElement) {
constructor() {
super();
// 现在可以访问 Umbraco 上下文和控制器
}
}
export default MyCustomButton;
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyElement extends UmbLitElement {
#notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
this.#notificationContext = context;
});
}
showNotification() {
this.#notificationContext?.peek('positive', {
data: { headline: 'Success!', message: 'Operation completed' }
});
}
}
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
export class MyElement extends UmbLitElement {
@state()
private _userName?: string;
constructor() {
super();
this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
this.observe(
context.currentUser,
(user) => {
this._userName = user?.name;
},
'_userName'
);
});
}
}
| 特性 | UmbLitElement | UmbElementMixin |
|---|---|---|
| 基类 | 预配置了 Lit | 可应用于任何基类 |
| 用法 | extends UmbLitElement | extends UmbElementMixin(BaseClass) |
| 最适合 | 基于 Lit 的组件 | 自定义基类或 UI 库组件 |
| 特性 | 相同特性 | 相同特性 |
就是这样!请务必获取最新文档,保持示例简洁,生成完整可用的代码。
每周安装量
80
代码仓库
GitHub 星标数
17
首次出现
2026年2月4日
安全审计
安装于
github-copilot57
cursor25
codex24
opencode23
gemini-cli21
amp21
An Umbraco Element is a Web Component enhancement that simplifies integration with the Umbraco Backoffice through the UmbElementMixin. It provides methods to consume/provide contexts, observe states, handle localization, and host controllers. UmbElementMixin can be applied to any Web Component-compatible base class, while UmbLitElement is a convenience wrapper combining the mixin with Lit.
Always fetch the latest docs before implementing:
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('my-element')
export class MyElement extends UmbLitElement {
constructor() {
super();
// Access built-in features
this.consumeContext(MY_CONTEXT, (context) => {
console.log('Context consumed:', context);
});
}
render() {
return html`
<div>
<h3>${this.localize.term('myKey')}</h3>
<p>My custom element</p>
</div>
`;
}
}
export default MyElement;
import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
@customElement('my-element')
export class MyElement extends UmbElementMixin(HTMLElement) {
constructor() {
super();
this.consumeContext(MY_CONTEXT, (context) => {
// Use context
});
}
connectedCallback() {
this.innerHTML = `
<div>
<h3>My Element</h3>
</div>
`;
}
}
export default MyElement;
import { customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui';
@customElement('my-custom-button')
export class MyCustomButton extends UmbElementMixin(UUIButtonElement) {
constructor() {
super();
// Now has access to Umbraco contexts and controllers
}
}
export default MyCustomButton;
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
export class MyElement extends UmbLitElement {
#notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
this.#notificationContext = context;
});
}
showNotification() {
this.#notificationContext?.peek('positive', {
data: { headline: 'Success!', message: 'Operation completed' }
});
}
}
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
export class MyElement extends UmbLitElement {
@state()
private _userName?: string;
constructor() {
super();
this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
this.observe(
context.currentUser,
(user) => {
this._userName = user?.name;
},
'_userName'
);
});
}
}
| Feature | UmbLitElement | UmbElementMixin |
|---|---|---|
| Base | Pre-configured with Lit | Apply to any base class |
| Usage | extends UmbLitElement | extends UmbElementMixin(BaseClass) |
| Best for | Lit-based components | Custom base classes or UI library components |
| Features | Same features | Same features |
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Weekly Installs
80
Repository
GitHub Stars
17
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot57
cursor25
codex24
opencode23
gemini-cli21
amp21
Genkit JS 开发指南:AI 应用构建、错误排查与最佳实践
7,700 周安装
二进制初步分析指南:使用ReVa工具快速识别恶意软件与逆向工程
69 周安装
PrivateInvestigator 道德人员查找工具 | 公开数据调查、反向搜索与背景研究
69 周安装
TorchTitan:PyTorch原生分布式大语言模型预训练平台,支持4D并行与H100 GPU加速
69 周安装
screenshot 截图技能:跨平台桌面截图工具,支持macOS/Linux权限管理与多模式捕获
69 周安装
tmux进程管理最佳实践:交互式Shell初始化、会话命名与生命周期管理
69 周安装
Git Rebase Sync:安全同步分支的Git变基工具,解决冲突与备份
69 周安装