自定义元素不省内存但能控制内存生命周期，需在disconnectedcallback中清理资源、避免shadow dom滥用、慎用innerhtml、切断隐式引用链。
自定义元素本身不省内存，但能帮你控制内存生命周期
HTML 自定义元素（customElements.define()）不是内存优化的银弹，它不会自动减少 DOM 节点或降低 JS 堆占用。它的价值在于：让你把「节点创建、挂载、卸载、资源清理」这些行为封装进可控的类中，从而避免全局变量持有 DOM、事件未解绑、定时器泄漏等典型内存问题。
比如一个反复开关的图表组件，用 <chart-widget></chart-widget> 封装后，你可以在 disconnectedCallback 里统一做三件事：ctx.clearRect()、controller.abort()、clearInterval(this.timerId)——而不用靠人肉记住每次手动清理。
- 不要在
connectedCallback里直接写document.addEventListener('scroll', ...)，改用this.addEventListener('scroll', ...)，这样移除元素时浏览器会自动解绑 - 避免在自定义元素类中缓存
this.shadowRoot.querySelectorAll('img')这类实时 NodeList；改用Array.from()转成静态数组，或只存 ID 后按需查 - 如果组件内部用了
new AudioContext()或canvas.getContext('2d')，必须在disconnectedCallback中显式释放，否则它们会长期驻留内存
别滥用 Shadow DOM，它可能增加内存开销
Shadow DOM 确实隔离样式和结构，但它不是免费的——每个 shadowRoot 都是一个独立的 DOM 子树，自带自己的 CSSOM、事件系统和布局上下文。Chrome 中一个空的 shadowRoot 至少额外占用 1–3 KB 内存；若嵌套多层或含大量子节点，开销会线性增长。
常见误用场景：<my-card></my-card> 每个实例都新建 shadowRoot，但实际只用来包裹几个 <div> 和内联样式。这种情况下，用普通 class + CSS 文件更轻量。
<ul>
<li>仅当需要强样式隔离、防止外部 CSS 泄漏、或实现真正可复用的黑盒组件时，才启用 Shadow DOM</li>
<li>避免在循环中动态创建自定义元素并附带 shadowRoot（如渲染 500 行表格），这会快速推高内存峰值</li>
<li>可以用 <code>element.attachShadow({ mode: 'closed' }) 阻止外部 JS 访问 shadowRoot，间接减少意外引用导致的 Detached DOM
innerHTML 在自定义元素中要格外小心
在 connectedCallback 或属性变更时用 this.innerHTML = htmlString 是最简写法，但极易引发内存泄漏。因为每次赋值都会销毁旧子树，而旧节点若被 JS 变量、闭包或第三方库（如 ECharts 的 option 引用）间接持有，就会变成 Detached DOM。
例如：const oldNode = this.querySelector('.data'); this.innerHTML = newHtml; —— oldNode 还活着，只是脱离了文档流。
- 优先使用
document.createElement()+appendChild()或replaceChildren()（现代浏览器支持），避免字符串拼接产生的临时 DOM 片段 - 若必须用 innerHTML，确保清空前已切断所有外部引用：删除缓存的 NodeList、置空闭包捕获的 DOM 变量、调用第三方库的销毁方法
- 对频繁更新的内容（如日志列表），用
DocumentFragment批量插入，而不是反复innerHTML +=
警惕自定义元素的“隐式引用链”
自定义元素类实例本身是 JS 对象，一旦被长期持有的变量（如全局 map、路由状态、Redux store）引用，它连带持有的所有 DOM 节点、事件监听器、定时器、Canvas 上下文就都无法被 GC 回收。
典型陷阱：class MyWidget extends HTMLElement { constructor() { super(); this.data = hugeDataObject; } } —— 即使元素已从 DOM 移除，只要这个实例还在某个对象里挂着，hugeDataObject 就一直占着堆内存。
- 在
disconnectedCallback中主动清理类字段：this.data = null; this.timerId = null; - 避免在自定义元素内定义匿名函数并传给外部 API（如
fetch().then(() => this.update())），改用具名方法或绑定this.update.bind(this)，否则闭包会锁死整个实例 - 用 Chrome Memory 面板拍快照后，在 «Retainers» 栏搜索你的自定义元素类名，看是谁在持有它（常见为
window、Map、Set或框架的响应式代理）
disconnectedCallback 里清理 canvas、abort fetch、清除定时器，或者让闭包无意中锁死了整个实例，那它比普通 div 更难排查泄漏。
