首页 文章

扩展HTMLTextAreaElement的HTML5 ES6自定义元素会导致非法构造函数崩溃

提问于
浏览 次
1

我需要从HTMLTextAreaElement扩展自定义元素，以便在表单中使用并直接获取值 . 但我总是得到Illegal Constructor Message

HTML：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <working-element></working-element>
    </div>
    <div>
      <crashing-element></crashing-element>
    </div>
  </body>
  <script src="myScript.js">
</html>

Typescript（编译为ES6到myScript.js）：

// all works fine
class newElementWorks extends HTMLElement {
  constructor(){
    super();
    console.log('newElementWorks');
  }
}
customElements.define('working-element', newElementWorks);

// this one crashes on super() call
class newElementCrash extends HTMLTextAreaElement {
  constructor(){
    super();
    console.log('newElementCrash');
  }
}
customElements.define('crashing-element', newElementCrash);

该脚本在支持ES6和Custom-Element的Chrome版本63.0.3239.132上执行

我已经尝试包括webcomponents/custom-elements polyfill

你有什么想法为什么从HTMLElement崩溃以外的地方延伸？

javascript html5 typescript ecmascript-6 custom-element

1 回答

  • 4

    您看到的错误意味着您调用 new on的对象没有 [[construct]] 内部方法 .

    尽管规范表明您可以 extend HTML * Element类，但此时似乎不支持它（请参阅类似的问题：https://github.com/webcomponents/custom-elements/issues/6），因此此时您只能扩展 HTMLElement .

    回复于

相关问题