用途：该技能定义了一套严格的 Web Components 架构模式，用于构建基于标准 Web 平台 API 的组件，不依赖外部库。
核心原则：零 DOM 选择（禁止 querySelector、querySelectorAll、getElementById）；属性驱动状态（状态通过 HTML 属性流入）；在自身元素上做事件委托并使用 handleEvent 模式；无外部依赖；使用 <template shadowrootmode="open"> 的声明式 Shadow DOM 实现即时渲染；渐进增强，JavaScript 失败时组件仍可降级工作；优先使用定制内置元素（customized built-ins）以保留原生可访问性。
主要能力：组件结构（extends HTMLElement 或原生元素）、生命周期回调（connectedCallback、disconnectedCallback、attributeChangedCallback、adoptedCallback）、observedAttributes 属性观察、通过 CustomEvent 输出事件（可 bubbles、composed 跨 Shadow 边界）、ElementInternals 表单关联与校验、ARIA 与键盘导航可访问性模式、CSS 自定义属性与 ::part()、:host、:host-context 样式 API。
使用方式：用 customElements.define 注册组件；定制内置元素需传 { extends: 'button' } 并在 HTML 中用 is="async-action" 引用；状态输入用属性，输出用事件；异步操作建议结合 javascript-pragmatic-rules 处理超时、取消与资源清理。
适用场景：需要原生、可复用、可访问且无框架依赖的 UI 组件，如异步按钮、产品卡片、表单输入、切换控件等。
限制：资料未提供安装命令、包名、版本、浏览器兼容范围、收费或价格信息；示例中的 fetch 地址与超时数值仅为演示，实际使用需自行替换。