定义组件

一个宏组件文件通常包含三部分：导入 API、顶层 setup 逻辑、导出组件。

import { defineHtml, useRef } from "@elfui/core";

const active = useRef(false);
const toggle = (): void => active.set(!active.peek());

export const TogglePanel = defineHtml(`
  <button @click=${toggle}>toggle</button>
  <section v-show=${active}>
    <slot></slot>
  </section>
`);

挂载根组件

应用入口使用 createApp()，不需要在 index.html 手写根组件 tag：

import { createApp } from "@elfui/core";
import { App } from "./App";

const app = createApp(App);
app.mount("#app");

app.mount() 会自动注册组件并替换目标容器内容，也可以直接传入 Element。返回值是已挂载的 Custom Element，需要卸载时调用 app.unmount()。

Tag 推断

命名导出会按导出名推断 tag：

导出名	推断 tag
UserCard	elf-user-card
ElfButton	elf-button
default	按文件名或目录名推断

如果需要统一项目前缀，请在 @elfui/vite-plugin 里配置 tagPrefix。宏组件 tag 是编译期结果，不受运行时 configure() 影响。

组件选项

组件级选项使用 defineOptions()：

import { defineHtml, defineOptions } from "@elfui/core";

defineOptions({
  shadow: "open",
  formControl: true,
  register: false
});

export const Field = defineHtml(`<slot></slot>`);

register: false 适合组件库内部导出构造器，再由入口统一 registerComponents()。