扩展 HTMLTextAreaElement 的 HTML5 ES6 自定义元素崩溃非法构造函数答案

【问题标题】：HTML5 ES6 Custom-Elements extending HTMLTextAreaElement crashes illegal constructor扩展 HTMLTextAreaElement 的 HTML5 ES6 自定义元素崩溃非法构造函数
【发布时间】：2018-07-03 12:20:23
【问题描述】：

我需要从 HTMLTextAreaElement 扩展一个自定义元素，以便在表单中使用并直接获取值。但我总是收到非法构造函数消息

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 以外的地方扩展会崩溃吗？

【问题讨论】：

你会将 TypeScript 代码转换成 ES5 还是 ES6？
@Bergi : 到 ES6
How to create new instance of an extended class of custom elements的可能重复

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

【解决方案1】：

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

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

【讨论】：

感谢您的快速响应。我想知道为什么网上有这么多教程，如果它在任何浏览器中都不起作用，那么它会从 HTML*Element 进行扩展。
他们是否填充了这些类？如果您有指向其中一个的链接，我会调查它，因为没有足够的信息来确定问题所在。此时你唯一能得出的结论是HTML*Element不能被继承。
不，它们不支持 HTMLElement 以外的其他内容。我打开的问题的答案是：我很快就会来。
这是我在回答中的结论，您可以接受还是发现它在某些方面有所欠缺（供将来的读者打样）？

【解决方案2】：

在您尝试扩展 HTMLTextAreaElement 时，有两件事是明显错误的。

您必须在注册元素时添加强制性的{ extends: 'textarea' } 第三个参数。
扩展的内置元素没有自己的标签，而是使用扩展元素的标签，在is="" 属性中添加您的名字。

class MyTextarea extends HTMLTextAreaElement {
  constructor(){
    super();
    console.log('MyTextarea');
  }
}

customElements.define('my-textarea', MyTextarea, {extends: 'textarea'});

&lt;textarea is="my-textarea"&gt;&lt;/textarea&gt;

【讨论】：