HTML自定义元素是承载标准化插件契约的唯一原生机制，关键在于约定生命周期、通信方式与能力注入点，而非单纯注册元素。
HTML自定义元素本身不能直接构成“插件系统”，但它是唯一能承载标准化插件契约的原生机制——关键不在注册多少个元素，而在如何约定生命周期、通信方式与能力注入点。
customElements.define() 不是插件注册入口，而是契约声明点
很多人把 customElements.define() 当成类似 registerPlugin() 的调用，结果发现组件间无法协同。其实它只做一件事：告诉浏览器“这个标签名对应一个受控的 DOM 实体”。真正的插件能力必须靠显式设计的接口暴露出来。
- 插件必须声明自己支持哪些扩展点，比如
addValidator()、onBeforeSubmit()，这些不能藏在私有方法里 - 宿主容器（如
form-fieldset）需提供registerPlugin(el)方法，且只接受已注册的合法自定义元素实例 - 禁止通过
document.querySelectorAll('plugin-*')动态加载——这绕过了类型校验，运行时可能拿到未定义的标签 - 重复注册同一名称会直接抛
DOMException: Duplicate definition，开发时建议先检查：if (!customElements.get('validator-email')) { customElements.define(...) }
attributeChangedCallback 无法响应 JS 属性赋值，插件配置要走 dataset 或 method
插件常需要接收配置，但依赖 attributeChangedCallback 会漏掉大量场景：比如父组件用 el.mode = 'strict' 设置属性，回调根本不会触发。
- 初始化配置优先用
dataset：写成<validator-email data-pattern="^[a-z]+@example\.com$"></validator-email>，在connectedCallback中读取this.dataset.pattern - 运行时变更必须提供明确方法，例如
setConfig({ pattern: /.../ })或enable({ realtime: true })，避免隐式 setter - 布尔类配置（如
data-disabled）读出来是字符串，需手动转：this.dataset.disabled === 'true'，不是Boolean(this.dataset.disabled) - 不要监听
mode这类通用名——多个插件同时监听会冲突；应限定为validator-mode或直接弃用 attribute，全走 method
Shadow DOM 是插件隔离的底线，但 style 注入必须手动完成
插件样式若靠外部 CSS 文件或全局 class，等于放弃封装性。Shadow DOM 能隔离结构，但不自动加载样式——浏览器不会帮你把 <link rel="stylesheet"> 解析进 shadowRoot。
立即学习“前端免费学习笔记（深入）”；
- 最简做法：在
connectedCallback中拼接<style>...</style>字符串并插入this.shadowRoot - 避免在每次
connectedCallback里重复创建 style 标签，可用querySelector('style')先查重 - 若插件需主题切换（如 light/dark），别用 CSS 自定义属性传参——shadowRoot 外的 :root 变量进不去；应在 JS 中根据主题生成对应 style 字符串再注入
- 使用
adoptedStyleSheets更高效，但 Safari 目前仍不支持，生产环境慎用
插件间通信不能靠事件冒泡，得用 internals 或自定义通道
两个插件（如 <input-validator> 和 <error-display>）放在同一个表单里，想同步状态？别指望 dispatchEvent(new Event('validate')) 能跨 shadow boundary 正常冒泡。
- 表单类插件必须启用
formAssociated: true并调用this.attachInternals()，这是唯一被浏览器认可的“表单内通信协议” - 非表单插件可约定一个全局通道，例如
window.PluginBus，但必须带命名空间：PluginBus.emit('validator.email.invalid', { value, el }) - 禁止在
constructor中监听跨插件事件——此时对方可能还没注册，customElements.get()返回 null - 所有通信都应带来源标识：
detail: { source: 'validator-email', target: 'error-display' }，避免循环或误响应
真正难的不是写十个自定义元素，而是让第十一个插件接入时不改前九个的任何一行代码——这要求每个插件都严格守约：命名、属性、事件、样式注入时机、生命周期职责，缺一不可。浏览器不替你 enforce 这些，全靠人盯。
