用自定义逻辑替换customElements.define：能否修改该方法改用自定义函数？

你的思路方向是对的，但直接覆盖window.customElements行不通——因为这个属性是只读的（你可以通过Object.getOwnPropertyDescriptor(window, 'customElements')查看它的属性描述符，writable为false）。不过别担心，有两种可靠的方案能实现你的需求：

方案1：用Proxy包装原注册表（推荐，能拦截所有调用） #

通过Proxy代理原customElements对象，你可以拦截define方法的调用，插入自定义逻辑，同时保留原注册表的所有原生功能。这种方案能捕获所有对window.customElements.define的调用，包括第三方库的调用。

示例代码：

const future = ["hello-world"];
const originalRegistry = window.customElements;

// 创建代理对象，拦截define方法
window.customElements = new Proxy(originalRegistry, {
  get(target, prop) {
    // 只拦截define方法
    if (prop === "define") {
      return function(name, constructor, options) {
        // 你的自定义逻辑：只允许指定名称的元素注册
        if (future.includes(name)) {
          // 调用原define方法完成注册
          return target.define.call(target, name, constructor, options);
        }
        // 不符合条件的情况，可以添加日志或其他处理
        console.log(`Skipped registration for unapproved element: ${name}`);
      };
    }
    // 其他方法直接返回原方法，保持原有功能
    return target[prop];
  }
});

// 测试：正常注册hello-world
class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.textContent = "Hello from custom element!";
  }
}
window.customElements.define("hello-world", HelloWorld);

// 测试：被拦截的其他元素
class OtherElement extends HTMLElement {}
window.customElements.define("other-element", OtherElement); // 会打印跳过日志，不会注册

方案2：创建自定义注册表（适合自主代码场景） #

如果不需要拦截第三方的调用，只是想在自己的代码里统一控制元素注册，可以创建一个自定义的注册表对象，所有注册操作都通过这个对象来完成。这种方案更简单，不需要依赖Proxy。

示例代码：

const future = ["hello-world"];
const myCustomRegistry = {
  // 自定义的define方法
  define(name, constructor, options) {
    if (future.includes(name)) {
      // 符合条件的元素，调用原生方法注册
      window.customElements.define(name, constructor, options);
    }
    // 可以额外维护自己的注册记录
    this.registeredElements = this.registeredElements || {};
    this.registeredElements[name] = { constructor, options };
  },
  // 自定义的获取方法
  getRegisteredElement(name) {
    return this.registeredElements?.[name] || window.customElements.get(name);
  }
};

// 使用自定义注册表注册元素
class HelloWorld extends HTMLElement {}
myCustomRegistry.define("hello-world", HelloWorld);

总结 #

• 如果需要全局拦截所有元素注册请求（包括第三方库），Proxy方案是最优解；
• 如果只是自己的代码需要统一控制注册逻辑，自定义注册表更简单直接。

内容的提问来源于stack exchange，提问作者marcus