如何用ES5创建Custom Elements v1并兼容IE11等浏览器？

好问题！确实，自定义元素v1规范默认依赖ES6类语法，但我们完全可以用ES5的写法来实现，同时配合合适的polyfill让它在IE11里跑起来。我来一步步拆解解决方案：

ES6类本质是原型继承的语法糖，我们可以直接操作原型链来模拟，核心是要符合自定义元素规范的构造函数要求——必须通过Reflect.construct调用父类（HTMLElement）的构造函数，确保实例的原型链正确。

下面是一个完整的ES5实现示例：

// 1. 创建继承自HTMLElement原型的自定义元素原型
var MyElementPrototype = Object.create(HTMLElement.prototype);

// 2. 定义构造函数，严格遵循规范调用Reflect.construct
MyElementPrototype.constructor = function MyElement() {
  // 这里必须用Reflect.construct来初始化父类，保证实例符合v1规范
  return Reflect.construct(HTMLElement, [], this.constructor);
};

// 3. 添加生命周期钩子，比如页面加载时执行的connectedCallback
MyElementPrototype.connectedCallback = function() {
  this.textContent = "我是用ES5写的自定义元素！";
  this.style.padding = "10px";
  this.style.border = "1px solid #ccc";
};

// 4. 注册自定义元素到浏览器
customElements.define('my-es5-element', MyElementPrototype.constructor);

这段代码在Chrome、Firefox里可以直接运行，因为这些浏览器原生支持自定义元素v1和Reflect API。

IE11本身既不支持自定义元素v1，也没有Reflect、Symbol这些ES6核心API，所以需要两个关键polyfill：

• core-js：补全IE11缺失的ES6基础API（包括Reflect、Symbol），这是自定义元素polyfill正常工作的前提。
• @webcomponents/custom-elements：提供自定义元素v1的API实现，它会在IE11环境下用自定义元素v0的机制模拟v1的行为，让我们可以统一使用customElements.define来注册元素。

注意引入顺序 #

必须先加载core-js，再加载@webcomponents/custom-elements的polyfill，确保依赖的ES6 API已经被补全，避免运行时错误。

你提到的那个问题方向是对的，但IE11没有原生的Reflect对象，所以必须通过core-js来polyfill它。只要你按顺序引入了polyfill，我们ES5代码里的Reflect.construct就能在IE11里正常工作了。

• 自定义元素的名称必须包含连字符（比如my-es5-element），这是规范强制要求的，避免和原生HTML元素冲突，IE11的polyfill也严格遵循这个规则。
• 如果不需要使用Shadow DOM，就不用额外引入相关polyfill，保持代码轻量化。
• 在IE11中测试时，建议把自定义元素的注册代码放在DOMContentLoaded事件回调里，或者确保代码在polyfill加载完成后再执行，避免出现未定义的API错误。

这种方案完全避开了Polymer、Stencil这类重型框架，只引入必要的polyfill，既能符合自定义元素v1规范，又能在Chrome、Firefox和IE11中稳定运行。

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