メニュー
@CustomElement decorator for registering Web Components. Invoke when creating new components or modifying component registration options.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | custom-element |
| description | @CustomElement decorator for registering Web Components. Invoke when creating new components or modifying component registration options. |
注册自定义元素（Web Component），配置 Shadow DOM、样式和属性监听。
import { CustomElement } from "@decorator";
@CustomElement(elementName: string, options?: CustomElementOptions)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
autoDefine | boolean | true | 是否自动调用 customElements.define() 注册 |
styles | string | string[] | — | 组件的 CSS 样式字符串（通常通过 ?inline 导入 SCSS） |
extraAttr | string | string[] | — | 额外需要监听的 HTML attribute 名称 |
import stylesheet from "./index.scss?inline";
@CustomElement("ea-alert", { styles: [stylesheet] })
export class EaAlert extends EaBase {
// ...
}
import stylesheet from "./index.scss?inline";
import sharedStyles from "../shared/styles.scss?inline";
@CustomElement("ea-component", {
styles: [sharedStyles, stylesheet],
})
export class EaComponent extends EaBase {
// ...
}
@CustomElement("ea-input", {
styles: [stylesheet],
extraAttr: ["value", "type"],
})
export class EaInput extends EaBase {
// extraAttr 中的属性会被加入 observedAttributes
}
@CustomElement("ea-base", {
styles: [variable],
autoDefine: false,
})
export default class EaBase extends HTMLElement {
// 基类通常不自动注册
}
mode: "open"@attribute 注册的属性，生成 observedAttributes@attribute 属性创建 Object.definePropertytabIndexrequestAnimationFrame 中：清空 shadowRoot → 应用样式 → 渲染模板 → $mount() → $mounted()adoptedStyleSheets，降级为 <style> 标签html() 函数进行 XSS 清洗每个组件类必须添加 JSDoc 注释，描述组件的元信息：
/**
* @summary 警告提示组件，用于展示重要的提示信息，支持多种类型和可关闭功能。
* @status stable
* @since 3.0
*
* @dependency ea-icon
*
* @slot icon - 自定义图标内容。
* @slot heading - 自定义标题内容。
* @slot default - 默认插槽，用于描述内容。
*
* @event close - 关闭时触发，detail: `{ visible: false }`。
*
* @csspart container - 容器元素。
* @csspart icon-wrap - 图标包裹元素。
*
* @cssproperty --ea-alert-height - 组件高度。
* @cssproperty --ea-alert-bg-color - 组件背景颜色。
*/
@CustomElement(TAG_NAME, { styles: [stylesheet] })
export class EaAlert extends EaBase {
| 标签 | 必填 | 说明 |
|---|---|---|
@summary | ✅ | 组件的中文简要描述，说明用途和核心功能 |
@status | ✅ | 组件稳定状态：stable / experimental / deprecated |
@since | ✅ | 组件首次引入的版本号 |
@dependency | 条件必填 | 依赖的子组件标签名（无依赖则省略） |
@slot | 条件必填 | 插槽描述，格式：@slot name - 描述，默认插槽用 default |
@event | 条件必填 | 事件描述，格式：@event name - 描述，detail: { ... } |
@csspart | 条件必填 | CSS Part 描述，格式：@csspart name - 描述 |
@cssproperty | 条件必填 | CSS Custom Properties描述，格式：@cssproperty --name - 描述 |
@summary - 必须为第一个标签@status@since@dependency（如有）@slot（如有，每个插槽一行）@event（如有，每个事件一行）@csspart（如有，每个 part 一行）@cssproperty（如有，每个属性一行）ea- 前缀开头ea-alert, ea-button-group）EaAlert, EaButtonGroup）@attribute decorator for defining HTML attribute-mapped properties. Invoke when creating or updating component attributes that map to HTML attributes.
@property decorator for defining pure JavaScript properties that do NOT map to HTML attributes. Invoke when creating internal component state properties.
BEM SCSS mixins for component styling. Invoke when writing or updating component SCSS styles using block/element/modifier/state mixins.
Component CSS styling standards including variables, host styles, states, and responsive patterns. Invoke when creating or updating component SCSS files.
Component documentation generation. Invoke when writing or updating component documentation including API tables, examples, and usage guides.
Event system for Web Components including emit() and custom event classes. Invoke when creating or updating component events.