HTML5 ES6 Custom-Elements extending HTMLTextAreaEl

2019-02-26 03:19发布

i need to extend a custom element from HTMLTextAreaElement for using in a form and fetch value directly. but i allways get 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 (compiled as ES6 to 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);

the script is executed on Chrome Version 63.0.3239.132 that supports ES6 and Custom-Element

i allready tried to include webcomponents/custom-elements polyfill

do you have any idea why extending from other than HTMLElement crashes?

标签： javascript html5 typescript ecmascript-6 custom-element

1条回答

HTML5 ES6 Custom-Elements extending HTMLTextAreaEl

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间