HTML插件化需用customElements.define()声明自定义元素并配合动态import()加载模块，避免全局脚本；依赖Shadow DOM实现样式隔离；通信应通过slot或非冒泡自定义事件；生命周期清理须在disconnectedCallback中手动处理。
HTML本身不支持插件，但可通过自定义元素 + 模块加载实现接口抽象
HTML没有原生插件机制，所谓“插件化扩展”本质是用 customElements.define() 声明可复用标签，并配合动态 import() 加载行为逻辑。这不是语法糖，而是浏览器原生支持的、零构建依赖的扩展方式。
常见错误是试图用 <script src="plugin.js"></script> 后直接调用全局函数——这导致加载顺序不可控、命名冲突、无法按需加载。正确做法是把插件封装为 ES 模块，导出一个注册函数：
export function install() { customElements.define('my-button', MyButton); }- 在主应用中按需触发：
await import('./plugins/my-button.js').then(m => m.install()); - 使用时只需写
<my-button label="提交"></my-button>，无需手动初始化
避免用 DOM 脚本列表判断插件是否就绪
很多开发者写 while (!document.scripts.some(s => s.src.includes('my-plugin'))) {} 来“等待插件”，这是严重误用。document.scripts 只记录静态 <script> 标签，对 import()、内联模块、Worker 加载的代码完全不可见，且会阻塞主线程。
真正可靠的就绪判断必须基于运行时状态：
立即学习“前端免费学习笔记（深入）”；
- 检查自定义元素是否已注册：
customElements.get('my-button') !== undefined - 监听
customElements.whenDefined('my-button')返回的 Promise - 若插件需初始化上下文（如编辑器），应暴露
isReady属性或onReady事件，而非轮询 DOM
样式与作用域隔离必须靠 Shadow DOM，不能只靠 CSS 类名
把插件样式写成 .my-plugin-button { ... } 是危险的。外部 CSS 或其他插件可能覆盖该类，尤其在微前端或多团队协作场景下极易失控。
Shadow DOM 是唯一能保证样式和结构隔离的标准方案：
- 在自定义元素构造函数中调用
this.attachShadow({ mode: 'open' }) - 将样式
<style>button { color: blue; }</style>直接注入 shadowRoot - 避免使用
:host-context()这类穿透性选择器，除非明确需要主题继承
注意：Shadow DOM 不影响 slot 内容的样式，若需透传主题，应通过 CSS 自定义属性（--my-plugin-color）而非类名。
插件间通信不能依赖全局事件，要用 slot 或自定义事件
用 window.dispatchEvent(new CustomEvent('plugin-ready')) 实现插件通信，会导致耦合度高、调试困难、事件被意外拦截或重复触发。
推荐分层通信策略：
- 父子关系明确时：用
<my-form><my-input slot="field"></my-input></my-form>，父组件通过slot.assignedNodes()获取子实例 - 松耦合场景：子插件派发带
bubbles: false的自定义事件，父容器监听自身上的事件（避免污染全局） - 跨层级通知：用
new EventTarget()创建专用事件总线，仅限同个插件包内共享，不暴露到全局
真正难的是插件生命周期管理——比如某个插件卸载时，如何自动清理它绑定的事件、定时器、WebSocket 连接？这必须由插件自身在 disconnectedCallback 中显式处理，没有银弹。
