可通过Object.getPrototypeOf获取自定义元素原型并动态添加/覆盖方法或属性，实现运行时“补丁注入”；需在customElements.define后立即操作MyButton.prototype，避免污染HTMLElement.prototype或操作私有字段。
可以通过
获取自定义元素的构造函数原型，再在其上动态添加/覆盖方法或属性，从而实现对 Web Components 原型链的“补丁注入”。这种方式不修改原始类定义，适合运行时增强、调试代理或跨框架兼容性适配。
获取目标组件的原型对象
Web Components（尤其是基于
定义的自定义元素）的实例原型链最终指向其构造函数的
。使用
可安全取得该原型对象：
对已注册的自定义元素，可先创建临时实例再取其原型：
若已知构造函数（如
），更直接：
（注意：这里是
的原型，即
；若想补丁
自身方法，则直接用
）
关键区分：
– 补丁组件**自有逻辑** → 操作
– 补丁**继承行为**（如重写
的默认处理）→ 需确认是否需在
上操作（通常不推荐，影响全局）
动态注入方法与访问器
拿到原型引用后，可使用
或直接赋值添加新成员，确保符合原型链语义：
添加实例方法：
安全覆盖已有方法（保留原逻辑）：
注入 getter/setter（例如暴露内部状态）：
确保补丁时机与作用域安全
补丁必须在组件类定义之后、首次实例化之前执行，否则可能被后续定义覆盖，或导致已有实例未继承新属性：
推荐在模块初始化阶段、
之后立即注入：
避免在组件内部生命周期中反复 patch（如每次
都改原型），这会引发性能和一致性问题
若需条件性补丁（如仅开发环境），可用
包裹，防止生产环境冗余代码
注意事项与限制
这种补丁方式灵活但有边界，需规避常见陷阱：
不可补丁静态方法
：静态方法属于构造函数本身，需操作
函数对象，而非其原型
无法拦截私有字段（#field）
：私有字段由 JS 引擎强制封装，原型补丁无法访问或定义它们
避免污染 HTMLElement.prototype
：除非明确需要所有元素共享行为，否则补丁应限定在具体组件原型，防止意外副作用
ES Modules 环境下注意导出时机
：若组件类是默认导出，确保 patch 代码在导入后执行，而非在模块顶层依赖未就绪时运行
Object.getPrototypeOfclassprototypeObject.getPrototypeOfconst proto = Object.getPrototypeOf(document.createElement('my-button'));MyButtonconst proto = Object.getPrototypeOf(MyButton.prototype);MyButton.prototypeHTMLElement.prototypeMyButtonMyButton.prototypeMyButton.prototypeconnectedCallbackHTMLElement.prototypeObject.definePropertyMyButton.prototype.logProps = function() { console.log(this.attributes); };const originalConnected = MyButton.prototype.connectedCallback;
MyButton.prototype.connectedCallback = function(...args) {
console.debug('before connected');
originalConnected.call(this, ...args);
};Object.defineProperty(MyButton.prototype, 'isReady', {
get() { return this._ready ?? false; },
enumerable: true
});customElements.define()customElements.define('my-button', MyButton);
// 紧接着打补丁
Object.assign(MyButton.prototype, { /* 新方法 */ });connectedCallbackif (process.env.NODE_ENV === 'development')MyButton