Menu
@query and @queryAll decorators for DOM element queries in Shadow DOM. Invoke when needing to access shadow DOM elements in components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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>
`;
}
}
@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.