无法使Web组件在codeandbox.io中工作

Question

我正在尝试获得一个自定义的内置Web组件，以在codeandbox.io中工作。 这是代码：

 class MyDiv extends HTMLDivElement { constructor() { super(); } connectedCallback() { this.innerHTML = "works!"; } } customElements.define("my-div", MyDiv, {extends: 'div'}); 

 <div is="my-div"></div> 

我得到的错误：

Failed to construct 'HTMLDivElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

已在Arch Linux的Chrome 67中进行了测试。 这是链接： https : //codesandbox.io/s/yqln560jzj

它确实可以在代码段中运行，也可以在Codepen上运行： https ://codepen.io/connexo/pen/ZjEbqo

我在这里想念什么？

Answer 1

如果它不起作用，是因为Codesandbox在外部JS文件上使用了一种Javascript预处理程序（Typescript？），它将在执行该代码之前（以检测语法错误等）。

customElements.define()方法被调用两次，第二次调用失败，因为您只能定义一个自定义元素。

您可以通过在脚本内调用customElements.get()来查看它，并查看它是否已定义。

console.log( customElements.get( 'my-div' ) )

如果将Javascript内联（在HTML文件index.html中 ）放在一个元素中，它将正常工作。

请注意，您得到的第二个错误是因为您在Codeopen代码段中使用了Babel预处理程序。 您必须禁用Babel才能使用。

我在这里想念什么？

没有。 缺少自定义元素支持的是codesandbox.io。