0

我正在尝试让一个定制的内置 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.

在 Chrome 67、Arch Linux 中测试。这是链接：https ://codesandbox.io/s/yqln560jzj

它确实在一个片段中工作，它也适用于 codepen：https ://codepen.io/connexo/pen/ZjEbqo

我在这里想念什么？

4

1 回答 1

0

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

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

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

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

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

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

我在这里想念什么？

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

于 2018-07-10T07:45:01.677 回答