菜单
@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>
`;
}
}