直接用封装图表组件行不通，因其仅存结构而不处理加载、更新、销毁逻辑，导致chart.js报canvas未挂载或静默失败；必须用customelements.define()封装，通过生命周期钩子闭环管理。
直接用 <template></template> 封装图表组件行不通——它只存结构，不处理加载、更新、销毁逻辑，图表库（如 Chart.js）会报 Canvas is not attached to DOM 或静默失败。
为什么 <template></template> 单独用不了图表交互
<template></template> 本质是惰性 DOM 片段，克隆后插入页面时，canvas 元素虽存在，但 Chart.js 初始化需要：① canvas 已挂载到 document；② 容器有计算后的宽高；③ 图表库全局变量已就绪。模板本身不触发这些条件。
- 常见错误：在
<template></template>里写<canvas id="chart-1"></canvas>，然后document.getElementById('chart-1')拿到 ctx 后直接new Chart(...)—— 此时 canvas 可能还没插入 body，ctx.canvas.width为 0 - 更隐蔽的问题：多次克隆同一模板，
id="chart-1"重复，getElementById只返回第一个，后续实例全部错位 - 响应式失效：模板没监听
resize或容器变化，chart.update()不会被调用
customElements.define() 是唯一能闭环管理图表生命周期的方案
必须用自定义元素封装，才能控制从加载、渲染、属性变更到卸载的全过程。关键不是“有没有模板”，而是“有没有钩子”。
-
constructor()：只做最小初始化（如super()、this.attachShadow()），**不能查 DOM 或初始化图表** -
connectedCallback()：此时元素已挂载，可安全获取this.shadowRoot.querySelector('canvas')，并检查window.Chart是否存在；若未加载，需延迟注册或动态import() -
attributeChangedCallback()：监听data-config、data-series等属性变更，**必须显式调用this._chart.data.datasets = ...; this._chart.update()**，仅改 HTML 不生效 -
disconnectedCallback()：**必须调用this._chart.destroy()**，否则内存泄漏；同时清理ResizeObserver、定时器等副作用
Shadow DOM 与图表库的兼容性陷阱
Chart.js 和大多数 Canvas 渲染库默认不支持 Shadow DOM，因为它们依赖父容器的 CSS 尺寸和 getBoundingClientRect() 计算，而 shadowRoot 内部无法继承外部样式上下文。
- 典型报错：
Failed to execute 'getComputedStyle' on 'Window': The provided node belongs to a different document - 绕过方式只有两个：① 改用 light DOM（
this.innerHTML替代this.attachShadow()），靠 CSS 类名隔离；② 把canvas渲染目标显式传入，例如new Chart(this.querySelector('.chart-canvas'), { ... })，并在 CSS 中确保该容器有明确宽高（不能靠100%自适应） - Leaflet/Mapbox 类地图库更严格：**禁止在 Shadow DOM 中初始化**，必须用 light DOM + 显式
container选项
属性传值与配置解析的实操细节
用户通过 HTML 属性传配置，但 JSON 字符串需安全解析，且要避免重复解析拖慢性能。
-
data-config='{"type":"bar","data":{"labels":["A","B"],"datasets":[{"data":[1,2]}]}}'这种写法可行，但每次attributeChangedCallback都JSON.parse()会浪费 CPU - 推荐做法：首次解析后缓存为
this._config = JSON.parse(val)；后续变更只深合并（Object.assign(this._config.data, newData)），再调用update() - 禁止把整个配置塞进
innerHTML（如this.shadowRoot.innerHTML = '<canvas></canvas>'后再 init）—— 这会销毁已有 canvas 实例，触发重绘抖动 - 移动端适配必须在初始化时设
options.responsive: true和options.maintainAspectRatio: false，否则 resize 后图表被拉伸或裁剪
真正难的不是写一个能显示的图表，而是让多个实例共存时不抢资源、属性变动能即时响应、切页后不残留定时器——这些都得靠自定义元素的生命周期钩子一一手动接管，<template></template> 本身不提供任何保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
