메뉴
@query and @queryAll decorators for DOM element queries in Shadow DOM. Invoke when needing to access shadow DOM 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 | query |
| description | @query and @queryAll decorators for DOM element queries in Shadow DOM. Invoke when needing to access shadow DOM elements in components. |
从组件的 Shadow DOM 中查询 DOM 元素。
import { CustomElement, query, queryAll } from "@decorator";
查询单个 DOM 元素，返回 Element | null：
@query(".ea-component")
private _container!: HTMLElement;
@query("input[type='text']")
private _input!: HTMLInputElement;
@query(".ea-component__icon")
private _icon!: HTMLElement;
查询所有匹配的 DOM 元素，返回 NodeListOf<Element> | null：
@queryAll(".ea-component__item")
private _items!: NodeListOf<HTMLElement>;
@queryAll("li")
private _listItems!: NodeListOf<HTMLLIElement>;
Object.defineProperty 定义 getterelement.shadowRoot 内_ 前缀（# 与装饰器不兼容）! 声明类型（因为 DOM 元素在组件挂载后才存在）@CustomElement(TAG_NAME, { styles: [stylesheet] })
export class EaComponent extends EaBase {
@query(".ea-component")
private _container!: HTMLElement;
@query(".ea-component__input")
private _input!: HTMLInputElement;
@queryAll(".ea-component__item")
private _items!: NodeListOf<HTMLElement>;
html(): string {
return `
<div class="${bem()}" part="container">
<input class="${bem.e('input')}" type="text" />
<ul>
<li class="${bem.e('item')}">Item 1</li>
<li class="${bem.e('item')}">Item 2</li>
</ul>
</div>
`;
}
}