메뉴
@children decorator for querying Light DOM children. Invoke when needing to access light DOM child elements in components.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
@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.
@CustomElement decorator for registering Web Components. Invoke when creating new components or modifying component registration options.
Component documentation generation. Invoke when writing or updating component documentation including API tables, examples, and usage guides.
| name | children |
| description | @children decorator for querying Light DOM children. Invoke when needing to access light DOM child elements in components. |
从组件的 Light DOM 中查询子元素（与 @queryAll 查询 Shadow DOM 互补）。
import { CustomElement, query, queryAll, children, listen } from "@decorator";
查询 Light DOM 中所有匹配的子元素，返回 NodeListOf<Element> | null：
@children("ea-carousel-item:not([slot])")
private _carouselItems!: NodeListOf<HTMLElement>;
@children('ea-carousel-item[slot^="clone-"]')
private _cloneItems!: NodeListOf<HTMLElement>;
@children(".list-item")
private _listItems!: NodeListOf<HTMLElement>;
Object.defineProperty 定义 getterelement 自身（Light DOM），使用 this.querySelectorAll(selector)| 装饰器 | 查询范围 | 典型用途 |
|---|---|---|
@queryAll | Shadow DOM (this.shadowRoot.querySelectorAll) | 查询组件模板内的元素 |
@children | Light DOM (this.querySelectorAll) | 查询组件宿主元素的子节点 |
_ 前缀（# 与装饰器不兼容）! 声明类型（因为 DOM 元素在组件挂载后才存在）@CustomElement(TAG_NAME, { styles: [stylesheet] })
export class EaCarousel extends EaBase {
@query(bem.ce("content"))
private _content!: HTMLElement;
@queryAll(bem.ce("indicator"))
private _indicatorNodes!: NodeListOf<HTMLElement>;
@children("ea-carousel-item:not([slot])")
private _carouselItems!: NodeListOf<HTMLElement>;
@children('ea-carousel-item[slot^="clone-"]')
private _cloneItems!: NodeListOf<HTMLElement>;
html(): string {
return `
<div class="${bem()}" part="container">
<ul class="${bem.e('content')}" part="content">
<slot name="clone-last"></slot>
<slot></slot>
<slot name="clone-first"></slot>
</ul>
</div>
`;
}
}