shadow dom 仅提供样式与 dom 隔离，交互逻辑须在自定义元素类中手动实现；事件绑定必须在 connectedcallback 中进行，属性响应需通过 observedattributes 和 attributechangedcallback 处理，第三方库需显式传入 shadow 内容器并妥善清理。
Shadow DOM 本身不封装交互逻辑，只提供样式和 DOM 隔离边界；交互逻辑必须手动在自定义元素类中实现，且事件绑定、状态更新、属性响应全得自己写。
为什么 onclick 属性或外部 addEventListener 在 Shadow DOM 里不生效
你在 <my-button><button onclick="alert(1)">Click</button></my-button> 里写 onclick，或者在外部用 document.querySelector('my-button').shadowRoot.querySelector('button').addEventListener(...)，运行时大概率报错或无响应——因为 shadowRoot 在 connectedCallback 之前是空的，而 constructor 里又查不到节点。
-
constructor中this.shadowRoot已存在，但内部 DOM 尚未挂载，querySelector返回null -
connectedCallback是唯一安全时机：此时元素已插入文档，shadowRoot完整可查 - 外部 JS 无法直接监听 shadow 内部节点事件（如
my-button button），必须在类内部绑定
如何正确绑定点击、输入等事件并响应状态变化
所有交互入口必须收口到类方法里，不能依赖 HTML 属性或外部脚本。比如一个带 loading 状态的按钮，点下后要禁用、显示加载图标、调用 API，完成后恢复——这些都不能靠“加个 disabled 属性”自动触发，得自己管。
- 在
connectedCallback中获取this.shadowRoot.querySelector('button')并调用addEventListener('click', ...) - 状态变更（如
this._loading = true）后，必须同步更新 UI：改 class、切换 slot、重设 innerHTML 或 style - 若需响应属性变更（如
disabled或loading），先在observedAttributes静态 getter 里声明，再在attributeChangedCallback中处理 - 避免在事件回调里直接操作
innerHTML—— 容易丢失已有事件监听器，推荐用classList.toggle()或setAttribute()
如何让第三方库（如 Chart.js）在 Shadow DOM 中正常交互
不是所有库都支持 Shadow DOM。Chart.js、Leaflet、Mapbox GL 等默认依赖 light DOM 的尺寸计算、CSS 继承甚至 document 查询能力，直接塞进 shadowRoot 很可能白屏、报错或卡死。
- 首选方案：放弃 Shadow DOM，用 light DOM + 命名空间 CSS 类（如
.my-chart-wrapper），确保<canvas></canvas>在主文档流中 - 若坚持用 Shadow DOM，必须显式传入渲染容器（如
new Chart(this.shadowRoot.querySelector('canvas'), {...})），并确保该 canvas 已有明确宽高（不能靠 CSS 百分比） - 每次属性变更（如
data-config）都要调用this._chart.data = ...; this._chart.update();，不能只改 DOM -
disconnectedCallback中必须销毁实例：this._chart.destroy()、清除定时器、移除 MutationObserver，否则内存泄漏
容易被忽略的生命周期与清理细节
很多人写了 connectedCallback 却忘了 disconnectedCallback，导致组件反复挂载/卸载后事件重复绑定、定时器堆积、第三方实例残留——这不是“偶尔卡一下”，而是稳定复现的内存增长。
-
connectedCallback中绑定的事件监听器、setInterval、MutationObserver，必须在disconnectedCallback中一一清理 - 第三方库实例（如
this._map）不调remove()或destroy()，下次初始化会冲突或报错 - 不要在
attributeChangedCallback里做 heavy 渲染，可节流或用requestIdleCallback推迟执行 -
adoptedCallback很少用，但若组件可能被document.adoptNode()移动，这里要重置上下文
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
