原生插件框架依赖四层硬约束：customElements.define()、显式生命周期控制、属性契约和Shadow DOM隔离；自定义元素名须含短横线且全小写，类必须继承HTMLElement，DOM操作限于connectedCallback，通信靠属性/事件/slot，样式须注入Shadow DOM。
原生插件框架不是靠“注册插件”就能跑起来的，而是靠 customElements.define() + 显式生命周期控制 + 属性契约 + Shadow DOM 隔离这四层硬约束撑起来的——漏掉任何一层，插件就可能加载失败、样式泄露、状态错乱或无法卸载。
自定义元素名必须带短横线且全小写，否则注册直接失败
浏览器在调用 customElements.define() 时会立刻校验名称格式，不合规就抛 DOMException，连 constructor 都不会执行。
-
my-plugin✅ 合法，可注册 -
myplugin❌ 报错：The name "myplugin" is not a valid custom element name -
MyPlugin❌ 大写字母不允许 -
my_plugin❌ 下划线不被接受 -
button❌ 与原生标签冲突，同样报错
命名不是风格偏好，是注册门槛。建议统一前缀（如 plugin- 或 ext-），例如 plugin-markdown、ext-auth，既避免冲突，也便于后续扫描识别。
插件类必须继承 HTMLElement，且 DOM 操作只能在 connectedCallback 中做
很多人把初始化逻辑全塞进 constructor，结果发现 this.shadowRoot 是 null、属性读不到、事件监听无效——因为此时元素还没挂到 DOM 树上。
立即学习“前端免费学习笔记（深入）”；
-
constructor只能调用super()、创建 Shadow DOM（this.attachShadow({ mode: 'open' })）、声明私有字段 - 所有渲染、属性读取（
this.getAttribute('config')）、事件绑定、fetch请求，都得挪到connectedCallback - 如果插件支持多次挂载（比如路由切换后重载），记得在
disconnectedCallback清理定时器、addEventListener和AbortController
别指望 attributeChangedCallback 能覆盖初始值：HTML 里写的 <plugin-chart data="[1,2,3]"></plugin-chart> 不会触发该回调的第一次执行，初始数据仍得在 connectedCallback 里手动读。
插件通信不能依赖全局变量，得靠属性 + 自定义事件 + slot 分发
原生 Custom Elements 没有上下文注入机制，所谓“插件间通信”，本质是靠显式约定的数据通道：
- 配置通过 HTML 属性传入，如
config、endpoint、theme，并在observedAttributes中声明监听 - 插件内部状态变更要派发
CustomEvent，例如this.dispatchEvent(new CustomEvent('ready', { detail: { id: this.id } })) - 内容分发用
<slot>，但注意：插槽内容在 Light DOM，样式不会穿透到 Shadow DOM，需靠::slotted(*)或part属性做有限样式透出 - 禁止在插件里直接操作
window、document或修改全局localStorage——这会让多个插件互相污染
一个常见坑是：用 el.value = 'xxx' 改属性值，却忘了 attributeChangedCallback 完全收不到——它只响应 setAttribute() 或 HTML 初始属性，JS 属性赋值是另一条路径，得自己同步。
样式必须注入 Shadow DOM，外部 CSS 不会生效
把 <link rel="stylesheet"> 写在自定义元素内部，或者指望父页面的 CSS 规则影响 Shadow DOM 内部节点，基本无效。Shadow DOM 的样式隔离是强制的。
- 最稳妥方式是在
connectedCallback中拼接<style>...</style>字符串并插入shadowRoot - 若样式复杂，可预编译为常量字符串（避免重复解析），或用模板函数生成
- 现代浏览器支持
adoptedStyleSheets，但 IE 和部分旧版 Safari 不支持，生产环境慎用 - 不要用
@import加载外部样式表——它在 Shadow DOM 中不触发，也不受 CSP 影响
真正容易被忽略的是：插件一旦被多次实例化，每个实例的 Shadow DOM 都会独立注入样式。如果样式块很大，又没做去重，会造成内存和渲染开销叠加——尤其在仪表盘类页面里同时挂十几个插件时，这点很关键。
