<p>真正支撑插件式架构的是 customElements.define() + observedAttributes + attributeChangedCallback 组合，需配合生命周期控制与 Shadow DOM 隔离；data-* 仅是字符串容器，无监听能力，无法触发更新，且 dataset 赋值不触发回调。</p>
HTML 属性本身不构成插件架构，data-* 和自定义元素的 attribute 机制只是数据传递的“管道”，不是扩展逻辑的载体；真正支撑插件式架构的是 customElements.define() + observedAttributes + attributeChangedCallback 这套组合，且必须配合明确的生命周期控制与 Shadow DOM 隔离。
为什么不能只靠 data-* 实现插件通信
data-* 属性只是字符串容器，没有监听能力，也不会触发更新。比如你写 <my-chart data-series='[{"x":1,"y":2}]'></my-chart>，这个 JSON 字符串不会自动变成 JS 对象，也不会在你改用 el.dataset.series = '[{"x":2,"y":3}]' 时通知组件重绘——因为 dataset 赋值绕过了 DOM 属性变更机制，根本不会触发 attributeChangedCallback。
常见错误现象：
- 在 React/Vue 中直接往原生标签写
data-config={obj}，结果渲染后 DOM 里是data-config="[object Object]" - 用
el.setAttribute('data-mode', true)，但组件没声明observedAttributes，回调压根不执行 - 把大量配置塞进
data-，导致 HTML 体积膨胀、解析慢、移动端首屏卡顿
observedAttributes 是插件响应的关键开关
自定义元素要感知属性变化，必须显式声明监听列表，且格式严格：小写、连字符、不含 data- 前缀。例如想监听 data-api-key，得在类中写：
立即学习“前端免费学习笔记（深入）”；
static get observedAttributes() {
return ['api-key', 'theme', 'auto-refresh'];
}
注意三点：
-
observedAttributes只对通过setAttribute()或 HTML 模板初始渲染触发的变更有效，dataset.xxx =不算 - 浏览器不会自动把字符串转成布尔或数字：
api-key="123"→newValue === "123"，需手动parseInt(newValue, 10)或newValue === 'true' - 若属性名含大写（如
data-ApiUrl），它不会被识别为api-url，监听失效
插件参数应分层设计：初始化 vs 运行时更新
插件启动阶段靠 HTML 属性注入基础配置，运行中靠 JS API 或事件驱动更新状态。硬把所有逻辑塞进属性监听，会导致：
- 频繁调用
attributeChangedCallback引发重复渲染（尤其当多个属性联动时） - 无法处理异步加载的配置（比如从 localStorage 读取后再设置属性）
- 与框架状态不同步：React 的
props改了，但没同步到自定义元素的setAttribute
更稳妥的做法：
- 初始化用
connectedCallback读取this.getAttribute('data-xxx')，做一次解析和默认值填充 - 运行时更新走公开方法：
element.setConfig({ theme: 'dark', autoRefresh: true })，内部再调用this.setAttribute('data-theme', 'dark')触发监听（可选） - 复杂数据（如图表 series）别放
data-，改用element.series = [...]（属性反射）或element.appendChild(seriesData)（slot 注入）
Shadow DOM 是插件隔离的底线
没有 Shadow DOM，你的插件样式和事件会和宿主页面互相污染。比如插件用了 .btn { color: red }，结果把整个页面的按钮都染红了；或者插件监听 click，却捕获到用户点其他区域的事件。
必须在 constructor 中创建 Shadow DOM，并把所有样式内联进去：
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host { display: block; }
.chart-container { width: 100%; height: 300px; }
</style>
<div class="chart-container"></div>
`;
关键提醒：
- 别在
constructor里操作this.shadowRoot.innerHTML以外的 DOM，此时this.children还不可靠 - 外部 CSS 无法穿透 Shadow DOM，
<my-chart class="large">中的.large不生效，得用:host(.large)在 shadow 内定义 - 如果插件需要主题适配，用
data-theme控制:host类名，而不是试图让外部样式表覆盖
