用途:DuskMoon Elements 提供 44 个自定义元素包,每个元素都是基于 @duskmoon-dev/el-base 的标准 Web Component,带 Shadow DOM,标签以 <el-dm-*> 命名,用于在网页或应用中构建界面。
安装与注册:可单个安装,如 bun add @duskmoon-dev/el-button;或一次安装全部,如 bun add @duskmoon-dev/elements。注册有三种方式:显式注册(可 tree-shaking)import { register } from '@duskmoon-dev/el-button'; register();;副作用自动注册 import '@duskmoon-dev/el-button/register';;注册全部 import { registerAll } from '@duskmoon-dev/elements'; registerAll();。
用法:在 HTML 中直接使用标签,如 <el-dm-button variant="filled" color="primary" size="md">Click me</el-dm-button>,以及 <el-dm-dialog> 配合 header/footer 具名插槽。属性可通过 HTML 属性(kebab-case)或 JS 属性(camelCase)设置,带 reflect: true 的属性双向同步。常见属性有 variant、color、size、disabled。数组、对象等复杂数据必须通过 JS 设置,使用 attribute: false。
事件:用 addEventListener 监听,事件会冒泡并可跨 Shadow DOM 组合。常见事件包括 dialog 的 open/close、table 的 sort/select/page-change、pagination 的 page-change、tabs 的 tab-change、input 的 dm-input/dm-change。
插槽与样式:具名插槽(如 header、footer、prefix、suffix、empty、actions 及默认插槽)将 light DOM 内容投射进 Shadow DOM;可用 ::part() 从外部样式化 Shadow DOM 内部。
主题:元素使用 @duskmoon-dev/el-base 的 CSS 自定义属性,可调用 applyTheme(document.documentElement, 'moonlight') 等预设主题(含 moonlight、sunshine、ocean、forest、rose),也可直接覆盖 --color-primary 等变量。属性变更通过 queueMicrotask 批量渲染。限制:复杂数据不能仅靠 HTML 属性传递;CSS art 元素(<el-dm-art-*>)参见 duskmoon-art-elements。其余细节暂未提供。