HTML5 ES6自定义元素继承HTMLTextAreaElement报非法构造函数问题

你踩的这个坑是自定义内置元素的注册规则问题！普通自定义元素（继承HTMLElement）直接注册就行，但继承HTMLTextAreaElement这类原生内置元素时，注册方式完全不一样。

问题根源 #

当你继承像HTMLTextAreaElement、HTMLInputElement这类原生内置元素时，浏览器需要明确知道你是基于哪个原生标签扩展的。如果注册时不指定这个信息，浏览器无法正确初始化内置元素的构造函数，就会抛出「Illegal Constructor」错误——这和普通自定义元素的注册逻辑完全不同。

修复方案 #

你需要做两处修改：

1. 注册自定义元素时添加extends选项
   在customElements.define的第三个参数里，明确指定你要扩展的原生元素标签名：

   class newElementCrash extends HTMLTextAreaElement {
     constructor(){
       super();
       console.log('newElementCrash');
       // 这里可以添加你的自定义逻辑，比如初始化默认内容
       this.value = "这是自定义的textarea";
     }
   }
   // 关键：第三个参数指定扩展的原生元素
   customElements.define('crashing-element', newElementCrash, { extends: 'textarea' });
   

2. 在HTML中通过原生标签+is属性使用
   自定义内置元素不能直接用自定义标签名，必须通过原生textarea标签加上is属性来引用：

   <div>
     <!-- 正确的使用方式 -->
     <textarea is="crashing-element"></textarea>
   </div>
   

补充说明 #

这样修改后，你的自定义textarea就能正常工作了：它会继承原生textarea的所有行为（比如表单提交时能正常获取值、支持原生的textarea属性和方法），同时还能加入你的自定义逻辑。即使使用了webcomponents polyfill，也必须遵循这个规范——polyfill只是兼容旧浏览器，不会改变自定义内置元素的核心注册规则。

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