HTML5 Custom Elements 计数器需定义继承 HTMLElement 的 CounterElement 类，实现 connectedCallback、disconnectedCallback、adoptedCallback 和 attributeChangedCallback 四个生命周期钩子，配合 Shadow DOM 封装渲染与交互，并通过 observedAttributes 和 customElements.define 注册使用。
在 HTML5 中使用 Custom Elements 创建带生命周期管理的计数器，核心是定义一个继承 HTMLElement 的类，并在其中实现 connectedCallback、disconnectedCallback、adoptedCallback 和 attributeChangedCallback 四个生命周期钩子。计数器状态可响应 DOM 插入/移除、属性变更和文档迁移等场景。
定义计数器类并绑定生命周期方法
创建一个名为 CounterElement 的类，继承自 HTMLElement。在构造函数中初始化内部状态（如 this.count = 0），并用 attachShadow({ mode: 'open' }) 启用 Shadow DOM 隔离样式与结构：
- 在
connectedCallback中启动计数逻辑（如定时器、事件监听）或恢复上次状态 - 在
disconnectedCallback中清理资源（如清除setInterval、移除事件监听器），避免内存泄漏 -
adoptedCallback可用于处理元素被移动到另一个文档时的重初始化（例如跨 iframe 场景） -
attributeChangedCallback监听value或step等属性变化，同步更新内部值和 UI
支持属性响应与状态同步
要使 counter-element value="5" 初始化为 5，需声明 observedAttributes 静态 getter，并在 attributeChangedCallback 中解析属性值：
- 检查
name === 'value'，用parseInt(attrValue, 10)转换并赋值给this.count - 调用私有方法
this.#render()更新 Shadow DOM 内容（如shadowRoot.querySelector('span').textContent = this.count） - 确保属性变更时触发视图刷新，且不引发重复渲染（可加防抖或值比对）
封装交互逻辑与 Shadow DOM 渲染
在 Shadow DOM 中构建按钮与显示区域，绑定点击事件：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 使用
this.shadowRoot.addEventListener('click', ...)并委托到具体按钮（如data-action="inc"） - 每次修改
this.count后，调用this.#render()重绘，同时通过this.setAttribute('value', this.count)同步到 HTML 属性（保持响应式一致性） - 为避免用户直接操作 DOM 绕过逻辑，所有状态变更必须经由类方法控制（如
this.increment()）
注册自定义元素并使用
调用 customElements.define('counter-element', CounterElement) 完成注册。之后可在 HTML 中直接使用：
注意：标签名必须包含短横线（-），且不能是保留名（如 html、title）。若需支持 SSR 或服务端预渲染，建议在 connectedCallback 中判断 document.body 是否存在，再执行依赖 DOM 的操作。
