HTML5 ES6 Custom-Elements extending HTMLTextAreaEl

2019-02-26 03:13发布

问题:

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?

回答1:

The error you are seeing means that the object you are calling new on does not have a [[construct]] internal method.

Although the specs indicates that you can extend HTML*Element classes it does not seem to be supported at this time ( see a similar issue : https://github.com/webcomponents/custom-elements/issues/6 ) so you can only extend HTMLElementat this moment.