Javascript 无法使web组件在codesandbox.io中工作

我正在尝试让一个定制的内置web组件在codesandbox.io中工作。代码如下：

类MyDiv扩展了htmldevelment{ 构造函数（）{ 超级（）； } connectedCallback（）{ this.innerHTML=“有效！”； } } define（“MyDiv”，MyDiv，{extends:'div'}）

---

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

调用

customElements.define（）

方法两次，第二次调用失败，因为您只能定义一个自定义元素

您可以通过在脚本中调用

customElements.get（）

来查看它，并查看它已经定义

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

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

请注意，您得到的第二个错误是因为您在Codeopen代码段中使用了Babel预处理器。你必须禁用巴贝尔，它会工作的

我错过了什么

---

没什么。它是缺少自定义元素支持的CODESANDBOX.IO。

它在Firefox 61中运行良好。我没有在Firefox 61.0.1中得到上述错误，而是得到了一个空白页。空白页，这是因为<代码> div < /代码>中没有任何内容。在里面放一些东西。检查connectedCallback方法。同时检查这里和codepen上的代码片段。据我所知，我确实禁用了Babel。起初我启用了它（添加了一个.babelrc文件），然后我删除了该文件，现在设置告诉我Babel没有启用。总是有Typescript在运行，因此出现了第二个错误（“构造失败…”）。使用JS预处理器无法正确实现扩展自定义元素。