原生HTML自定义元素本身不渲染图表，但可通过封装Chart.js等库实现可复用图表组件；需在connectedCallback中初始化、用observedAttributes监听属性、用Shadow DOM隔离样式、防重复init，并通过CustomEvent通信联动。
原生 HTML 自定义元素（Custom Elements）本身不渲染图表，但能封装 Chart.js、ECharts 或 SVG 渲染逻辑，实现可复用、可声明式使用的交互式图表组件。关键在于：把图表初始化、事件绑定、状态更新逻辑收进 customElements.define()，而不是直接操作 DOM。
如何定义一个可传参的 <chart-bar> 自定义元素
自定义元素必须继承 HTMLElement，且需在 connectedCallback 中初始化图表——不能在构造函数里做，因为此时 DOM 节点可能尚未挂载。
-
observedAttributes列出需要响应的 HTML 属性（如data-series、data-labels），并在attributeChangedCallback里解析 JSON 字符串并触发重绘 - 内部用
canvas或div作为渲染容器，通过this.attachShadow({ mode: 'open' })隔离样式，避免污染全局 - 不要在
connectedCallback里重复 init 图表实例；加 guard 判断this.__chart是否已存在，否则多次插入同一元素会报Canvas is already in use
示例片段：
class ChartBar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<canvas></canvas>`;
}
connectedCallback() {
if (this.__chart) return;
const canvas = this.shadowRoot.querySelector('canvas');
this.__chart = new Chart(canvas.getContext('2d'), {
type: 'bar',
data: {
labels: JSON.parse(this.getAttribute('data-labels') || '[]'),
datasets: JSON.parse(this.getAttribute('data-series') || '[]')
}
});
}
static get observedAttributes() { return ['data-labels', 'data-series']; }
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'data-series' && this.__chart) {
this.__chart.data.datasets = JSON.parse(newVal);
this.__chart.update();
}
}
}
customElements.define('chart-bar', ChartBar);
为什么 onClick 在自定义元素里失效或拿不到数据点
Chart.js 的 onClick 回调默认作用域是 chart 实例，而自定义元素中 this 指向的是元素实例，容易混淆上下文。更严重的是：如果在 connectedCallback 外部定义回调函数，闭包捕获的 this 可能是 undefined 或指向错误对象。
立即学习“前端免费学习笔记（深入）”；
- 必须把
onClick回调写成箭头函数，或显式绑定this（如onClick: (e, active) => this.handleClick(e, active)） - 不要依赖
e.target获取图表数据——Canvas 是位图，点击坐标需通过chart.getElementsAtEventForMode(e, 'nearest')映射，否则返回空数组 - 若想向外抛出点击事件，用
this.dispatchEvent(new CustomEvent('chart-click', { detail: { label, value } }))，而非直接调用父组件方法
如何让多个 <chart-pie> 和 <chart-line> 联动过滤
自定义元素之间不共享状态，靠 DOM 事件通信最轻量。推荐用 window 广播 + 自定义事件名前缀，避免冲突。
- 一个图表点击时 dispatch
new CustomEvent('chart-filter', { detail: { dimension: 'category', value: 'A' } }) - 其他图表在
connectedCallback里监听：window.addEventListener('chart-filter', this.handleFilter.bind(this)) - 注意移除监听器：在
disconnectedCallback中调用window.removeEventListener，否则内存泄漏 - 不要在自定义元素里直接修改其他图表的
data属性——应统一由事件驱动，保持单向数据流
真正难的不是封装图表，而是状态同步时机：比如一个图表正在动画重绘，另一个发来 filter 事件，此时调用 chart.update() 可能被丢弃或卡顿。稳妥做法是加防抖或队列缓冲，而不是裸调 update。
