扩展HTMLTextAreaElement的HTML5 ES6自定义元素会导致非法构造函数崩溃 [英] HTML5 ES6 Custom-Elements extending HTMLTextAreaElement crashes illegal constructor
问题描述
我需要从HTMLTextAreaElement扩展自定义元素，以便在表单中使用并直接获取值。但我总是得到非法的构造函数消息
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（编译为ES6到myScript.js）：
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);
脚本在支持ES6和Custom-Element的Chrome版本63.0.3239.132上执行
the script is executed on Chrome Version 63.0.3239.132 that supports ES6 and Custom-Element
我已经尝试包括 webcomponents / custom-elements polyfill
i allready tried to include webcomponents/custom-elements polyfill
你知道为什么要从HTMLElement崩溃以外的地方进行扩展吗？
do you have any idea why extending from other than HTMLElement crashes?
推荐答案
您看到的错误意味着您正在调用的对象 new on没有 [[construct]] 内部方法。
The error you are seeing means that the object you are calling new on does not have a [[construct]] internal method.
虽然规格表明您可以扩展 HTML *元素类，但此时似乎不支持它（参见类似问题： https://github.com/webcomponents/custom-elements/issues / 6 ）所以你现在只能扩展 HTMLElement 。
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.
这篇关于扩展HTMLTextAreaElement的HTML5 ES6自定义元素会导致非法构造函数崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
