無法使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。