问题
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.
来源：https://stackoverflow.com/questions/48422748/html5-es6-custom-elements-extending-htmltextareaelement-crashes-illegal-construc